React父组件向子组件传值

目录

需求

代码实现

父组件

子组件


需求

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

代码实现

父组件

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cityName: 'New York',
    };
  }

  handleChangeCity = (newCityName) => {
    this.setState({ cityName: newCityName });
  };

  render() {
    return (
      
); } }

子组件

class ChildComponent extends Component {
  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,react.js,前端,前端框架,组件传值)