目录
需求
代码实现
父组件
子组件文章来源：https://www.toymoban.com/news/detail-801183.html
需求
首先，在父组件中，我想点击按钮触发事件调用方法去setState值，因为值变了所以引发子组件重新刷新加载，在子组件中检查传递给子组件的属性是否发生变化，并根据需要执行操作。文章来源地址https://www.toymoban.com/news/detail-801183.html
代码实现
父组件
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
cityName: 'New York',
};
}
handleChangeCity = (newCityName) => {
this.setState({ cityName: newCityName });
};
render() {
return (
<div>
<button onClick={() => this.handleChangeCity('London')}>
Change City to London
</button>
<ChildComponent cityName={this.state.cityName} />
</div>
);
}
}子组件
class ChildComponent extends Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
cityName: '',
};
}
componentWillReceiveProps(nextProps: any) {
// 检查传递给子组件的属性是否发生变化，并根据需要执行操作
alert(nextProps.cityName);
if (this.props.cityName !== nextProps.cityName) {
alert('City Name has changed');
}
}
render() {
return null; // 或其他组件的渲染内容
}
}到了这里，关于React父组件向子组件传值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
