ReactJS学习系列课程React 组件的组合使用

React是基于组件的，整个项目就是各个组件拼接而成，这也是目前最主流的架构方案，组件化，react的这一个特性十分鲜明，那么react组件的组合使用也是非常简单，说多无用，我们看代码：

var Child = React.createClass({
    render: function(){
        return(
            <div>
                <span>Hello {this.props.fullName}.It is {this.props.time} now</span>
            </div>
        )
    }
});

var Parent = React.createClass({
    getInitialState: function(){
        return{
            time: new Date().toDateString()
        }
    },addFamilyName: function(name){
        return name + ' Jobs';
    },render: function() {
    return (
      <Child fullName={this.addFamilyName(this.props.name)} time={this.state.time} />
    );
  }
});

var StevenData = {
    img: "http://a.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=a5575f5d7c899e516c83324623ceb256/500fd9f9d72a6059b5806dba2f34349b023bbafa.jpg",birthDay: "1955年2月24日" 
}

ReactDOM.render(
  <Parent data={StevenData}/>,document.getElementById('example')
);

在上面代码中，我们创建了两个组件一个Child,一个Parent,我们要在Parent使用定义好的Child组件，并传递name和time属性，使用过程中我们只要在render中以html element的形式使用即可，比如：

最后我们把Parent组件映射到Dom上，就完成了简单的组合。

在真正项目我们往往需要把不同的组件拆分成不同的js文件编写，比如Child，我们写在Child.js文件中，parent写在Parent.js中，这样如果们要使用child组件，就需要在parent导入child，也就是import命令。

好了，大家自己尝试一下吧！So easy!!!!

ReactJS学习系列课程React 组件的组合使用

相关文章