react 监听 父组件 往 子组件 传值 子组件根据父组件 传的值 变化 夫组件 改变值 子组件就会变
时间: 2023-06-21 18:04:28 浏览: 134
React传值 组件传值 之间的关系详解
可以使用 props
和 state
来实现这个功能。首先,在父组件中定义一个 state
,并将它作为 props
传递给子组件:
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
onChange = (event) => {
this.setState({ value: event.target.value });
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.onChange} />
<ChildComponent value={this.state.value} />
</div>
);
}
}
function ChildComponent(props) {
return <div>{props.value}</div>;
}
在子组件中,可以直接使用 props.value
来获取父组件传递过来的值。
当父组件的 state
发生变化时,子组件也会重新渲染,并且会从父组件获取最新的值。这样,当父组件的值改变时,子组件的值也会随之改变。