react 监听 父组件 往 子组件 传值 子组件根据父组件 传的值 变化 夫组件 改变值 子组件就会变

在 React 中，可以通过 props 将数据从父组件传递给子组件。如果父组件的数据发生变化，可以通过 setState 方法更新父组件的状态，并将新的状态传递给子组件。子组件可以通过 componentWillReceiveProps 方法监听父组件传递过来的新的 props 值，并根据新的值进行相应的变化。

以下是一个示例代码：

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <div>
        <input value={this.state.value} onChange={this.handleChange} />
        <ChildComponent inputValue={this.state.value} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      outputValue: ''
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.inputValue !== this.props.inputValue) {
      this.setState({ outputValue: nextProps.inputValue });
    }
  }

  render() {
    return <div>{this.state.outputValue}</div>;
  }
}

在这个示例中，父组件中的 input 组件的值发生变化时，会触发 handleChange 方法，更新父组件的 value 状态。同时，也会将新的 value 值传递给子组件 ChildComponent。当子组件接收到新的 inputValue 值时，会触发 componentWillReceiveProps 方法，更新子组件的 outputValue 状态。因此，当父组件的 value 值发生变化时，子组件的内容也会随之变化。