React--JSX語法

来源:https://www.cnblogs.com/n2meetu/archive/2018/04/12/8804977.html
-Advertisement-
Play Games

粗淺的理解是把要展現的東西一股腦寫道render{}裡面就好,然後在頁面指定的div內渲染出來。 順帶複習一下es6中map: es6的Map結構用來表示鍵值對的集合,和js的Object的區別在於: object只能用字元串做鍵名,但是Map是可以包括各類值的 比如 ...


粗淺的理解是把要展現的東西一股腦寫道render{}裡面就好,然後在頁面指定的div內渲染出來。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>

    <script type="text/babel">
    var arr = [
        <h1 key="1">Hello world!</h1>,
        <h2 key="2">React is awesome</h2>,
      ];

    ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
    )

     </script>
</body>
</html>
<!DOCTYPE html>
<html>

<head>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
    <script src="./js/browser.min.js"></script>
</head>

<body>
    <div id="example"></div>

    <script type="text/babel">
        var names = ['andy','bob','kate'];
    
        ReactDOM.render(
            <div>
                { 
                    names.map(function (name) { 
                        return <div>hello,{name}! </div>
                    }) 
                }
            </div>,

            document.getElementById('example') 
        )
    </script>
</body>

</html>

<!-- 順便複習一下ES6的 Map 結構
var names = ['andy','bob','kate'];
names.map(function(name){
    return {name};
}) -->

順帶複習一下es6中map:

es6的Map結構用來表示鍵值對的集合,和js的Object的區別在於:

object只能用字元串做鍵名,但是Map是可以包括各類值的 比如
let map = new map{}
map.set(NaN,123);
map.get(+0)  // 123

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQL query practice with MySQL [toc] 0.create table / Navicat Premium Data Transfer Source Server : localhost Source Server Type : MySQL Source Server ...
  • iPhone / iOS SDK 最酷的特性之一就是應用將其自身”綁定”到一個自定義 URL scheme 上,該 scheme 用於從瀏覽器或其他應用中啟動本應用。 註冊自定義 URL Scheme 註冊自定義 URL Scheme 的第一步是創建 URL Scheme — 在 Xcode Pro ...
  • 首先說:小米的垃圾支持.我在支持頁面上看著 miuiV4或V5版本,再看我手機上9.5的版本.就感覺有些不妙. 下載下來後,點擊安裝程式,提示我安裝空間不足......我F盤可用空間140G,不夠你造的? 最後解決辦法: 首先保證你的手機開了開發者模式 和 USB調試 還有USB安裝. 下載360手 ...
  • 首先,介紹一下UIView相關的動畫。 動畫屬性設置: 舉2個例子: 2. UIView Block動畫 這3個動畫比較簡單,不再多做敘述。 Spring動畫ios7.0以後新增了Spring動畫(IOS系統動畫大部分採用Spring Animation, 適用所有可被添加動畫效果的屬性) Keyf ...
  • 蘋果開發者賬號中,測試機器列表達到100臺上限,想要刪除一些設備、添加新設備,怎麼辦? 我們公司規模比較大,項目也比較多,最近就遇到了開發過程中發現新的iPhone添加不到測試設備中,在蘋果開發者中心添加新設備給予下麵的提示 意思是說測試設備已達到100台的上限,於是以為把原來添加的設備“Disab ...
  • ReactiveObjC使用 ReactiveCocoa是Github開源的一個用於iOS和OS開發的新框架,Cocoa是蘋果整套框架的簡稱。敢自稱為XXXCocoa框架可以想象到這個框架的牛逼! 現在分為ReactiveObjC和ReactiveSwift,兩個框架的功能使用相似,本文主要介紹Re ...
  • 如果兩個不同的應用註冊了同樣的URL Scheme,那麼後安裝的應用會響應符合這種協議格式的URL。 如果你的應用的iPhone和iPad版是各自獨立的(即不是Universal類型的),那麼你就不應該給兩個版本的應用定義同樣的URL協議。如果用戶在同一個設備上先後安裝了兩個版本的應用,之後又刪除了 ...
  • 聲明全局變數 ViewController.m showV.h showV.m ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...