ReactJS-当父组件状态改变时更新子组件状态

Question

我是reactjs的新手，我不知道如何从父组件中更改子组件的状态。下面是代码

<ChildComponent productCode={this.state.productCode} />

每当对父组件中的productcode执行setstate时，我希望子组件接收productcode。

有什么建议吗？

Answer 1

这确实有效，但请注意，子作为道具接收此数据，而不是作为其内部状态的一部分。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <section>
        Count: {this.state.count}
        <br />
        <button
          onClick={() =>
            this.setState((prevState) => ({
              count: prevState.count + 1,
            }))
          }
        >
          Increment Count
        </button>
        <Child passedCount={this.state.count} />
      </section>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <section>
        I am the child. The <code>count</code> * 2 ={' '}
        {/* Access `this.props.passedCount` to use the value */}
        <b>{this.props.passedCount * 2}</b>
      </section>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<Parent />, rootElement);

css lang-css prettyprint-override">section {
    background: beige;
    padding: 1em;
}

section > section {
    background: sandybrown;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>