JSX 語法

一種特殊的js 語法糖，可以在程式碼中把html 標籤當物件使用，可以總結成以下幾個特點：

#不加任何引號

以前在js 中使用html 標籤都是加上引號當成字串#使用，而在jsx 語法中不用加引號，直接當物件使用

    var html = <h1>React</h1>;

登入後複製

標籤一定要有對應的結束標籤或結束標識：

有時候我們在寫html 結構的時候，都沒有把對應的結束標識加上，但瀏覽器能正常解析，但在jsx語法當中，則要強制寫標準的html 結構
這一段html　標籤在瀏覽器是能正常解析

    <input type="text" value="React">

登入後複製

這一段在jsx 語法當中則會報錯

    var html = <input type="text" value="React">;

登入後複製

jsx 正確寫法應該是這樣的

    var html = <input type="text" value="React" />;
    var p = <p>React</p>;

登入後複製

只能有一個根節點

在jsx 語法當中，最頂層的結構一定只有一個節點，不能出現兄弟節點

    var html = 
    <p>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

登入後複製

不能在標籤當中加註解

在jsx 語法當中，html 標籤是一個對象，是一種資料結構，而不是真實的dom 節點，也不是字串，所以在標籤當中不能加入註解。
下面的程式碼是在標籤當中加入了註釋，所以會報錯。

    var html = 
    <p>
        <!--不能添加注释，这里会报错-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

登入後複製

jsx 語法允許html 標籤和javascript 程式碼混寫

在jsx 語法當中，要在html 標籤中使用到js 程式碼，則用花括號（{ expression}）括起來。

    var name = "DK";
    var style = {fontSize: '12px', color: 'red'};
    var html = <span style={style}>{name}</span>;

登入後複製

最終上面的程式碼將會解析成

    <span style="font-size:12px; color:red">DK</span>

登入後複製

React 使用

React 是一個第三方的框架庫，所以在使用前要先把相關的庫文件引入。

    <!--React 核心库-->
    <script src="../../../../libs/react/react.js"></script>
    <!--React 跟 Dom 相关的功能库-->
    <script src="../../../../libs/react/react-dom.js"></script>
    <!--babel 库，将 JSX 语法转为 JavaScript 语法-->
    <script src="../../../../libs/react/browser.min.js"></script>

登入後複製

React 是基於jsx 語法去實現，所以需要明確script 的類型為text/babel

    <script type="text/bebal"></script>

登入後複製

使用React 的核心物件和方法`ReactDOM.render`進行將html 標籤渲染到指定的容器

    <body>
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="p3"></p>
        <!--jsx 语法-->
        <script type="text/babel">
            //将标签直接渲染到容器 p1 当中
            ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
            var _style = {fontSize: '12px', color: 'red'};
            var _name = "Tom";
            var _obj = {name: "DK", age: 18};
            //标签与 js 代码混写
            ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
            var array = ["Tom", "Lucy", "Lily"];
            //多级标签和 js 代码混写
            ReactDOM.render(
                <p>
                    <ul>
                        {
                            array.map(function(arg1, arg2){
                                return <li key={arg2}>{arg1}</li>;
                            })
                        }
                    </ul>
                    <ul><li>Sam</li></ul>
                    <ul><li><input type="text" /></li></ul>
                </p>,
                document.getElementById('p3')
            );
        </script>
    </body>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！