ReactJS，如何从孩子更新父母的状态[重复]

Question

如果我有一个设置状态并将其传递给子级的父级，我如何从子级更改父级的状态？

    // parent
    this.state = {
        status: 'doing...'
    }

    // child render
    <div>{this.props.state.status}</div>
    // child function triggered by an onClick
    update = () => this.setState(status: 'finished');

这样的东西是行不通的

    // parent
    this.state = {
        status: this.props.state.status
    }

    // or child
    this.props.setState(status: 'finished');

    // or child
    getDerivedStateFromProps(nextProps) {
       console.log('I'm never executed)
       this.setState({ status: nextProps.state.status});
    }

Answer 1

这里说的

How to update the state of child component from parent?

使用选项 2，我不明白的是如何通过 props 传递函数。

如果我在孩子中定义了<CHILD message={this.message}，那么我可以在孩子中使用this.props.message 调用该函数。

Answer 2

我们偶然发现了同样的问题。我们的做法是将原始状态更改器外包给父级本身。不要管理父组件和子组件之间的状态。如果需要，请使用 Redux 调度它。

目前，我能说的最好的话是：

// Parent Component
class Parent {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      SomeVar: "Something"
    });
  }
  render() {
    <Child onUpdate={this.handleClick} />
  }
}

现在有了孩子，以这种方式发送值更容易。