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

Question

我知道有类似的问题，但没有一个回答我的问题。将问题形象化就是它的样子。

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

我有这样的应用程序组件:

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 类中创建一个方法并将其传递给您的左/右组件。在方法中使用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>
    );
  }
}

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

使用钩子(Hook)

几乎相同的东西，但你会使用，useState本质上是免费获取 setter 方法:

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

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