如何在React中更新父状态？

Question

如何在React中更新父状态？我的结构如下：Component 1    - |- Component 2  - - |- Component 4  - - -  |- Component 5  Component 3组件3应该根据组件5的状态显示一些数据。由于props是不可变的，我不能简单地将它保存在组件1中并转发它，对吧？是的，我读过有关redux的内容，但不想使用它。我希望只有反应就可以解决它。我错了吗？

Answer 1

对于子父通信，您应该传递一个函数，将状态从父级设置为子级，就像这样

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler(someValue) {
    this.setState({
      someVar: someValue    })
  }

  render() {
    return <Child handler = {this.handler} />
  }}class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }}

这样，孩子可以通过调用带有props传递的函数来更新父级的状态。

但是你必须重新考虑组件的结构，因为据我所知，组件5和3不相关。

一种可能的解决方案是将它们包装在更高级别的组件中，该组件将包含组件1和3的状态。该组件将通过props设置较低级别的状态。

Answer 2

我发现以下工作解决方案将onClick函数参数从child传递给父组件：

传递方法的版本（）

//ChildB componentclass ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div><button onClick={() => handleToUpdate('someVar')}>
            Push me          </button>
        </div>)
    }}//ParentA componentclass ParentA extends React.Component {

    constructor(props) {
        super(props);
        var handleToUpdate  = this.handleToUpdate.bind(this);
        var arg1 = '';
    }

    handleToUpdate(someArg){
            alert('We pass argument from Child to Parent: ' + someArg);
            this.setState({arg1:someArg});
    }

    render() {
        var handleToUpdate  =   this.handleToUpdate;

        return (<div>
                    <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
    }}if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );}

看看JSFIDDLE

传递箭头功能的版本

//ChildB componentclass ChildB extends React.Component {

    render() {

        var handleToUpdate  =   this.props.handleToUpdate;
        return (<div>
          <button onClick={() => handleToUpdate('someVar')}>
            Push me          </button>
        </div>)
    }}//ParentA componentclass ParentA extends React.Component { 
    constructor(props) {
        super(props);
    }

    handleToUpdate = (someArg) => {
            alert('We pass argument from Child to Parent: ' + someArg);
    }

    render() {
        return (<div>
            <ChildB handleToUpdate = {this.handleToUpdate} /></div>)
    }}if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentA />,
        document.querySelector("#demo")
    );}

看看JSFIDDLE