React父组件向子组件传值

本文主要是介绍React父组件向子组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

需求

代码实现

父组件

子组件

---

需求

首先，在父组件中，我想点击按钮触发事件调用方法去setState值，因为值变了所以引发子组件重新刷新加载，在子组件中检查传递给子组件的属性是否发生变化，并根据需要执行操作。

代码实现

父组件

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父组件向子组件传值的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---