react-jsx

時間 2019-12-09

標籤 react jsx 欄目 React 简体版

原文原文鏈接

在react中，並非必定須要用jsx，可是，開發react，推薦使用jsx, 爲何？javascript

1. 方便開發者開發。html

2. 使用相似於XML的方式，須要一個閉合的標籤，如<Node></Node>;java

3. 它能夠在javascript中使用，可是不會修改javascript的語義。react

HTML 標籤和 react 的comproents 比較：es6

若是隻是渲染普通的html標籤，標籤的開頭是以小寫字母開頭的，如：。babel

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

若是是渲染react 的comproent組件，只須要建立一個以大寫字母開頭的class變量：dom

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

在寫react組件在寫節點屬性的時候，有兩個屬性須要注意一下，就是class和for，由於這個在es6中屬於它的關鍵字，爲避免衝突，將class的使用改成了className，for 改成了htmlFor，舉例以下：ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='../build/react.js'></script>
    <script type="text/javascript" src='../build/react-dom.js'></script>
    <script type="text/javascript" src='../build/browser.min.js'></script>
</head>
<body>
    <div id="example"></div>

    <script type='text/babel'>
        var HelloMessage = React.createClass({
            render:function(){
                return (
                                    <div>
                                       <h1 className="h1">Hello {this.props.name}</h1>;
                                       <label htmlFor="username"><input id="username" /></label>
                                    <div>
                                )
            }
        });

        ReactDOM.render(
            <HelloMessage name='xiangming' />,
            document.getElementById('example')
        )
    </script>
</body>
</html>

使用jsx建立一個class時，若是沒有指定類名，jsx會默認地把定義的變量做爲展現的類名使用。this

// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });

若是咱們要在標籤的屬性上面使用變量做爲屬性值，咱們須要用花括號 {} 代替雙引號 "":spa

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

在js語法中，它的註釋和js是有一些不一樣的：

jsx規定，在花括號{}中可使用js代碼，因此單行註釋須要用花括號{}包裹一下，而後再使用 /*要註釋的內容*/，

多行註釋能夠直接使用

多行註釋內容1

多行註釋內容2

多行註釋內容3

var content = (
  <Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
  </Nav>
);

參考連接：http://reactjs.cn/react/docs/jsx-in-depth.html

相關標籤/搜索

React

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。