Props 就是properties 的缩写,我们可以使用Props把任意类型的数据传递给子组件。子组件本身不能设置它的props ,只能从父组件继承。我们来看下面一个例子:
// 示例1
var MessageBox = React.createClass({
render:function(){
var msgs = [];
this.props.messages.forEach(function(msg,index){
msgs.push(
<p>码农说: {msg}</p>
)
});
return (
<div>
<h1>{
this.props.title}</h1>
{msgs}
</div>
)
}
});
var title = '来自props:';
var subMessages = [
'我会代码搬砖',
'我会花式搬砖',
'不说了,工头叫我回去搬砖了。。。。。。',
];
ReactDOM.render( <MessageBox title={title} messages={subMessages}/>,
document.getElementById('example')
)
上述代码中,我们通过 props 向子组件 MessageBox
传递了两个属性:title
和 messages
,然后在子组件中通过 this.props.title
和 this.props.messages
来获取相应的数据。因为this.props.messages
为数组,因此调用 forEach
方法来遍历。最后效果如下:
这里有一个潜在问题,当父组件没有向子组件传递相应的 props 时,子组件无法通过this.props.key
来获取相应的数据。这时就需要用到 getDefaultProps()
。
1、getDefaultProps()
getDefaultProps()
方法与上一节提到的 getInitialState()
作用相似,不同的是getDefaultProps()
为 props
设置默认值,而getInitialState()
是为 state
设置默认值。
// 示例2
var MessageBox = React.createClass({
getDefaultProps:function(){
return {
title:'默认title:',
messages: ['默认的子消息'],
}
},
render:function(){
var msgs = [];
this.props.messages.forEach(function