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