const MessageBox = React.createClass({
getInitialState:function() {
return {
title: 'props属性传值',
messages: ['messages1','messages2','messages3','messages4']
}
},
render: function () {
return (
<div>
<p>我是子组件1</p>
<p>{this.state.title}</p>
<SubMessageBox messages = {this.state.messages}/>
</div>
)
}
});
const SubMessageBox = React.createClass({
propTypes: { // 声明数据类型
messages: React.PropTypes.array.isRequired
},
getDefaultProps: function(){
return {
messages: ['若未传message,会报未定义,故此这里定义一个默认值,即使为空数组也行,但一定要定义']
}
},
render:function() {
{/* let messages = [];
this.props.messages.forEach(function(msg,index) {
console.log(msg);
messages.push(msg)
});
console.log(this.props.messages)*/}
return(
<div>
<p>我是子组件2</p>
<p>{this.props.messages}</p>
<Footer messages={this.props.messages} />
</div>
)
}
})
const Footer = React.createClass({
render:function() {
let messages = [];
this.props.messages.forEach(function(msg,index) {
msg += index
messages.push(msg)
});
return (
<div>
<p>我是子组件3</p>
<p>{messages}</p>
</div>
)
}
})
const MessageBoxObj = React.render(
<MessageBox/>,
document.getElementById('app'),
function() {
console.log('渲染完成');
}
);
react 组件之间的参数传递
最新推荐文章于 2024-02-02 19:01:46 发布