react——组件

     <h1>react组件</h1>      <p>本章节我们将讨论如何使用组件使得我们的应用更容易管理。</p>     <h1 id="example"></h1>     <h1 id="example2"></h1>     <h1 id="example3"></h1>     <script type="text/babel">         //接下来我们封装一个输出“Hello World!”的组件，组件名为HelloMessage:         var  HelloMessage = React.createClass({             render: function(){                 return <h1>Hello World</h1>             }         });         ReactDOM.render(                 <HelloMessage />,                 document.getElementById("example")         )     </script>  <p>React.createClass方法用于生成组件类HelloMessage，<HelloMessage />实例组件类并输出信息</p>  <p>注意：原生HTML元素名以小写字母开头，而定义的react类名以大写字母开头，除此之外还需要注意的是组件类只能包含  一个顶层标签，否则也会报错。</p>  <p>如果我们需要向组件类传递参数，可以使用this.props对象,示例如下</p>     <script type="text/babel">         var HelloMessage2 = React.createClass({             render: function(){                 return <h1>Hello,{ this.props.name }</h1>             }         });         ReactDOM.render(                <HelloMessage2 name="谢夏岭" />,                 document.getElementById("example2")         )     </script>  <p>注意：以上实例中，name属性通过this.props.name来获取。添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为  class和for是JavaScript的保留字。</p>  <p>复合组件：我们可以通过创建多个组件来合成一个组件，即把不同的组件的不同功能点进行分离。</p>     <script type="text/babel">         //复合组件         var WebSite = React.createClass({             render: function(){                  return (                          <div>                              <Name name={this.props.name} />                              <Link site={this.props.site} />                          </div>                  )             }         });         var Name = React.createClass({             render: function(){                 return <h1>{this.props.name}</h1>             }         });         var Link = React.createClass({             render: function(){                 return <a href={this.props.site}> { this.props.site } </a>             }         });         ReactDOM.render(                 <WebSite name="菜鸟教程" site="http://www.runoob.com" />,                 document.getElementById("example3")         )     </script>