var Button = React.createClass({
//使用context时下级组件必须指定context的数据类型
contextTypes:{
color:React.PropTypes.string
},
render:function () {
return (
<button style={{background: this.context.color}}>
{this.props.children}
</button>
);
}
});
var Message=React.createClass({
render:function () {
return (
<div>
{this.props.text} <Button>删除</Button>
</div>
);
}
});
var MessageList=React.createClass({
childContextTypes:{
color:React.PropTypes.string
},
getChildContext:function () {
return {color:"lightblue"}
},
render:function () {
var i=0;
var children=this.props.messages.map(function (message) {
return <Message key={'btn_'+(i++)} text={message}/>
});
return <div>{children}</div>;
}
});
var messages=[
"罗小黑",
"谛听",
"老君"
];
ReactDOM.render(
<MessageList messages={messages}/>,
document.getElementById('Context')
);
错误主要意思是子组件缺少id属性,因为循环产生的子组件最好加上一个key属性,那么在定义父组件MessageList的时候,render函数中的<Message>组件要加上id属性,如以上代码标注的地方。
以上的代码还有个知识点:使用Context特性实现组件树上的数据越级传递,请仔细观察标注的地方。
运行效果: