Question

我知道也有类似的问题，但没有一个回答了我的问题。要看清楚问题，这里是它的样子。

好，所以我有以下问题：单击“左组件”后，我想将“主体”更改为“ BodyLeftClicked”，单击右键组件后，我想将主体更改为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 } />
  );
}

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

1 个答案: