从子级更改父级的一部分 - React.js

Question

我知道有类似的问题，但没有人回答我的问题。 可视化这里的问题就是它的样子。

好的，所以我有以下问题：单击 Left 组件后，我想将 Body 更改为 BodyLeftClicked，单击 Right 组件后，我想将 Body 更改为 BodyRightClicked。

我有这样的 App 组件：

class App extends React.Component {
    state = { choose: "Left" }; //initialize one body

    render() {
        return (
            <div className="All">
                <div className="head">
                    <Top name={"Left"}/>
                    <Top name={"Right"}/>
                </div>

                <div className="body">
                    {(() => {
                        switch(this.state.choose) {
                            case "Left":
                                 return <BodyLeftClicked choose={this.state.choose}/>;
                            case "Right":
                                return <BodyRightClicked choose={this.state.choose}/>;
                        }
                    })()}

                </div>
            </div>
        );
    }
}

页面顶部的两个组件（左组件和右组件）由：

class Top extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name : this.props.name };
        this.onButtonClick = this.onButtonClick.bind(this);
    }

    onButtonClick() {
        //CHANGE THE BODY WHICH IS BEING SHOWN IN APP 
    }

    render() {
        return (
            <div>
                <button className="Button" type="button" onClick={this.onButtonClick}>{this.state.name}</button>
            </div>
        )
    }
}

和身体组件的例子：

class BodyLeftClicked extends React.Component {
constructor(props) {
        super(props);
        this.state = { choose : this.props.choose };
    }
    render() {
        return (
            <div className="BodyLeftClicked">  </div>
        )
    }
}

Answer 1

您基本上希望在 App 类中创建一个方法并将其传递给您的 Left/Right 组件。 在方法中使用setState ，它会根据传递给它的参数而改变。 它看起来像这样：

class App extends React.Component {
  state = { choose: "Left" };

  setChoose = position => {
    this.setState({ choose: position });
  }
}

然后把它传下来：

<Top name="Left" onButtonClick={ this.setChoose } />

并通过单击处理程序从组件内部调用它：

class Top extends React.Component {
  render() {
    return (
      <div>
        <button className="Button" type="button" onClick={props.onButtonClick}>{this.state.name}</button>
      </div>
    );
  }
}

理想情况下，您会对正确的组件执行相同的操作。

使用钩子

几乎相同的事情，但您基本上可以免费使用， useState和获取 setter 方法：

function App(props) {
  const [choose, setChoose] = useState('Left');

  return (
    <Top name="Left" onButtonClick={ setChoose } />
  );
}