四.组件

React 允许代码封装成组件（component）,然后向插入HTML一样，在网页中插入组件。React.createClass方法就用于生成一个组件类。

<!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 HelloMessage = React.createClass({
        render:function(){
          return <h1>Hello {this.props.name}</h1>;
        }
      })

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

上面代码中，变量HelloMessage就是一个组件类，模板插入<HelloMessage　　/>时，会自动生成HelloMessage的一个实例。

所有的组件都有自己的render方法。用于输出组件。

注意：组件类的第一个字母必须大写，否则会报错。比如HelloMessage不能写成helloMessage。另外组件类只能包含一个顶层标签。否则也会报错。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。　　

posted @ 2016-09-10 09:49  约翰·史密斯  阅读(187)  评论(0)  编辑  收藏  举报