《React+Redux前端开发实战》—2.2.2 属性（props）
【摘要】 本节书摘来自华章计算机《React+Redux前端开发实战》一书中的第2章，第2.2.2节，作者是徐顺发.
2.2.2 属性（props）
state是组件内部的状态，那么组件之间如何“通信”呢？这就是props的职责所在了。通俗来说，props就是连接各个组件信息互通的“桥梁”。React本身是单向数据流，所以在props中数据的流向非常直观，并且props是不可改变的。props的值只能从默认属性和父组件中传递过来，如果尝试修改props，React将会报出类型错误的提示。
props示例应用：
（源码地址为https://jsfiddle.net/n5u2wwjg/35076/）
function Welcome(props) {
return <p>Hello, {props.name}</p>
}
function App(){
return (
<Welcome name='world' /> // 引用Welcome组件，name为该组件的属性
)
}
ReactDOM.render(
<App />,
document.querySelector("#app")
)
上述代码使用了函数定义组件。被渲染的App组件内引用了一个外部组件Welcome，并在该组件内定义了一个名为name的属性，赋值为world。Welcome组件接收到来自父组件的name传递，在界面中展示Hello，World。
当然，也可以使用class来定义一个组件：
class Welcome extends React.Component{
render() {
return <p>Hello, {this.props.name}</p>;
}
}
这个Welcome组件与上面函数式声明的组件在React中的效果是一样的。
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）