react中多个component的问题记录

在使用react创建多个component的过程中，

React.createClass();

该方法创建的component在使用上注意以下几个方面：

• return()方法中加入多个的component会报错并且显示错误，因此，需要在return中最外层加入一个标签，具体代码如下：

正确书写如下：

const Page = React.createClass({
   render: function() {
       return (
           <div>
               <Nav/>
               <Container hello={this.props.hello}/>
           </div>
       )
   }
});

//错误书写如下：

const Page = React.createClass({
   render: function() {
       return (
           <Nav/>
           <Container hello={this.props.hello}/>
       )
   }
});

报错如下：

//完整代码如下：

const Page = React.createClass({
   render: function() {
       return (
           <div>
               <Nav/>
               <Container hello={this.props.hello}/>
           </div>
       )
   }
});
const Nav = React.createClass({
    render: function() {
        return (
            <nav className="nav">
                <ul>
                    <li>beace1</li>
                    <li>beace2</li>
                    <li>beace3</li>
                    <li>beace4</li>
                </ul>
            </nav>
        )
    }
});
const Container = React.createClass({
   render: function() {
      return(
         <div className="container">{this.props.hello},我是一个container!</div>
      )
   }
});
ReactDOM.render(
    <Page hello="hello"/>,
    document.getElementById('container')
);