jsx语法

来源：互联网发布：搜索电影免费网络观看编辑：程序博客网时间：2024/05/17 04:26

首字母大小写，如自定义标签 MyTitle ，react会把组件的首字母是大写，他就知道是自定义的组件，如果是小写，会当成dom节点（<h1></h1>）

采用驼峰命名，class 改为 html中的 className 写法；

      var data = 123;      var MyTitle = React.createClass({        propTypes: {          title: React.PropTypes.string.isRequired,        },        render: function() {          return <h1 className="abc"> {this.props.title} </h1>;        }      });      ReactDOM.render(        <MyTitle title={data} />,        document.getElementById('example')      );

注释写法，需要在括号里写（解释成执行JS代码环境），单行和多行注释：

var HelloMessage = React.createClass({        render: function() {          return <h1 /*                       多行注释代码                      */            className="abc" > Hello {this.props.name}          {          //单行注释语句          }          </h1>;        }      });      ReactDOM.render(        <HelloMessage name="John" />,        document.getElementById('example')      );

嵌套需要外层嵌套个div，style比较特殊，需要{} 执行，而变量style又是个对象 <div style={ { color : "red" , border : "1px solid #222" } }> 或者如下写法

var style= { color : "red" ,border : "1px solid #222"} var HelloWold = React.createClass({ render: function() {   return (     <p>Hello,Wold</p>   ); }});ReactDOM.render( <div style={ style }>  <HelloWold> </HelloWold> </div>  , document.body);

//直接使用dangerouslySetInnerHTML创建标签（不建议！）

var style= {color : "red" ,border : "1px solid #222"}var HelloWold = React.createClass({  render: function() {    return (      <p >Hello,Wold</p>    );  }});var rawHTML = {__html : "<h1>I am Html</h1>"};ReactDOM.render(  <div style={ style } dangerouslySetInnerHTML={rawHTML} ></div>  ,  document.body);

0 0