目标是从父组件继承参数进子组件内容
1:先新建一个父组件,并且获得父组件的标题,获得父组件conts内容赋给一个messages。
//创建一个父组件叫TestZ
var TestZ = React.createClass({
getInitialState:function(){
return {
isVisible:true,
title:'父组件的标题',
conts:[
'创建日期:2016',
'创建人:Jackson',
]
}
},
render:function(){
return (
<div>
//通过this.state.cont获取组件内容。
<h1>父组件的conts内容:{this.state.conts}</h1>
//通过this.state.conts获取组件内容并且赋给messages。并且把子组件TestS嵌套进父组件。
<TestS messages = {this.state.conts}/>
</div>
)
}
});
2:创建一个子组件叫TestS
//创建一个子组件
var TestS = React.createClass({
//检查messages的类型。
propTypes:{
messages: React.PropTypes.array.isRequired,
},
//getDefaultProps来设置messages默认值。
getDefaultProps:function(){
return {
messages: ['默认的子消息'],
}
},
render:function(){
var msgs =[];
//通过props来继承messages内容,(这里父组件costs的内容已传递给了messages),并且遍历出来插入新定义的变量msgs。
this.props.messages.forEach(function(msg,index){
msgs.push(
<p>子组件继承的内容:{msg}</p>
)
});
return(
<div>
<h1>子组件的标题</h1>
//在子组件内展示出msgs,这个继承自父组件并在构建组件时改变过了。
{msgs}
</div>
)
}
});
3:插入DOMTERR
React.render(
<TestZ />,
document.getElementById('TestCont'),
function(){
console.log('渲染完成。。。')}
)