React之props 属性介绍
【摘要】 一、前言如果需要在React组件之间进行传值,那么props属性就起到了这个作用,在React中props和state是两个非常重要的属性。state 和 props 主要区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。Note:属性是用于设置默认值,不改...
一、前言
如果需要在React
组件之间进行传值,那么props
属性就起到了这个作用,在React
中props
和state
是两个非常重要的属性。
state
和 props
主要区别在于 props
是不可变的,而 state
可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state
来更新和修改数据。 而子组件只能通过 props
来传递数据。
Note:属性是用于设置默认值,不改变的值使用props
,改变的值使用state
.
- 每个组件对象都会有
props
(properties
的简写)属性;- 组件标签的所有属性都保存在
props
中;- 内部读取某个属性值:
this.props.propertyName
;- 作用:通过标签属性从组件外向组件内传递数据(只读
read only
);- 对
props
中的属性值进行类型限制和必要性限制;
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
- 扩展属性:将对象的所有属性通过
props
传递
<Person {...person}/>
- 默认属性值
Person.defaultProps = {
name: 'Mary'
};
二、Demo
/*
1. 拆分组件: 拆分界面, 抽取组件
* 单个标题组件: Welcome
* 应用组件: App
2. 分析确定传递数据和数据类型
* Welcome: props.name string
* App: props.names array
*/
//定义内部标题组件
class Welcome extends React.Component {
render() {
return <h2>Welcome {this.props.name}!</h2>;
}
}
Welcome.propTypes = {
name: React.PropTypes.string.isRequired
};
//定义外部应用组件
class App extends React.Component {
render() {
return (
<div>
{
this.props.names.map(
(name, index) => <Welcome name={name} key={index}/>
)
}
</div>
);
}
}
App.propTypes = {
names: React.PropTypes.array.isRequired
};
var names = ['Tom', 'Jack', "Bob"];
ReactDOM.render(<App names={names}/>, document.getElementById('example'));
三、拓展阅读
- 《React系列》
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)