React 父子组件传值的方式
1. 父传子
由于React是单向数据流,因此造成了当前组件的state以props形式流动时,只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中,只能由父组件传 props 给子组件,而不能反过来。
子组件代码
function Child(props) {
return (
<div className="child">
<p>{`子组件接收父组件的文本内容是:[${props.fatherText}]`}</p>
</div>
);
}`
父组件代码
class Father extends React.Component {
// 初始化父组件的 state
state = {
text: "初始化的父组件的文本"
};
// 按钮的监听函数,用于更新 text 值, 子组件中的props也会改变
changeText = () => {
this.setState({
text: "改变后的父组件文本"
});
};
// 渲染父组件
render() {
return (
<div className="father">
<button onClick={this.changeText}>
**点击修改父组件传入子组件的文本**
</button>
{/* 将state中的内容,通过props传入子组件 */}
<Child fatherText={this.state.text} />
</div>
);
}
}
2. 子传父
因为props流动是单向的,所以父组件传递给子组件的是一个绑定了自身上下文的函数,那么子组件在调用该函数时,就可以将想要交给父组件的数据以函数入参的形式给出去,以此来间接地实现数据从子组件到父组件的流动。
子组件
class Child extends React.Component {
// 初始化子组件的 state
state = {
text: '子组件的文本'
}
// 子组件的按钮监听函数
changeText = () => {
// changeText 中,调用了父组件传入的 changeFatherText 方法
this.props.changeFatherText(this.state.text)
}
render() {
return (
<div className="child">
{/* 注意这里把修改父组件文本的动作放在了 Child 里 */}
<button onClick={this.changeText}>
点击更新父组件的文本
</button>
</div>
);
}
}
父组件
class Father extends React.Component {
// 初始化父组件的 state
state = {
text: "初始化的父组件的文本"
};
// 这个方法会作为 props 传给子组件,用于更新父组件 text 值。newText 正是开放给子组件的数据通信入口
changeText = (newText) => {
this.setState({
text: newText
});
};
// 渲染父组件
render() {
return (
<div className="father">
<p>{`父组件的文本内容是:[${this.state.text}]`}</p>
{/* 引入子组件,并通过 props 中下发可传参的函数 实现子-父通信 */}
<Child
{`通过此方法实现子传父`}
changeFatherText={this.changeText}
/>
</div>
);
}