一、props
react中的prop是从外部传递给组件的数据。
给组件的prop赋值:
<SelectTagModel
params='params'
visible={this.state.showTagsModel}
onCancel={this.handleCancel.bind(this, 'tags')}
onOk={this.handleOk.bind(this)}
tags={tagsData['Book']}
handleCommitTags={this.handleCommitTags.bind(this)}
selTags={this.state.tagsArr} />
上述组件中的属性,即为调用此组件的父组件通过prop传递给SelectTagModel组件的值。
从prop中取值:
class SelectTagModal extends React.Component {
constructor() {
super();
}
}
组件内部需要调用super(),才能够使用prop中的值。
在组件内部还可以使用propTypes检查组件中属性中的数据类型:
static get propTypes() {
return {
params: PropTypes.string.isRequired,
visible: PropTypes.boolean.isRequired,
onCancel: PropTypes.fn,
onOk: PropTypes.func,
tags: PropTypes.object.isRequired,
handleCommitTags: PropTypes.func,
selTags: PropTypes.array.isRequired
};
}
二、state
驱动组件渲染过程的除了prop,还有state,state代表组件的内部状态,记录自身的数据变化。
组件内初始化state:
class SelectTagModal extends React.Component {
constructor() {
super();
this.state = {
selectedTags: []
};
}
}
读取state的值:this.state.xxx;
更新state的值:this.setState({ xx: y });
三、state和props的区别:
a、prop用于定义外部接口,state用于记录内部状态;
b、prop的赋值在外部世界使用组件时调用,而state的赋值在组件内部;
c、组件不应该改变传入的prop的值,而state存在的目的就是在组件内部来改变的;
注意:在使用过程中不应该去修改传入的props的值。