如何在reactjs中隐藏一个div并将其替换为另一个div？

Question

有 2 个 div。div1 和 div2。最初，显示 div1，隐藏 div2。单击按钮时，必须隐藏 div1，并在 div1 的位置显示 div2。

Answer 1

创建一个状态来指示是否div1要显示或div2将要显示。然后，onClick向按钮添加处理函数。最后，根据该状态有条件地渲染要显示的组件。

代码：

class TwoDivs extends React.Component {
  state = {
    div1Shown: true,
  }

  handleButtonClick() {
    this.setState({
      div1Shown: false,
    });
  }

  render() {

    return (
      <div>
        <button onClick={() => this.handleButtonClick()}>Show div2</button>
        {
        this.state.div1Shown ? 
           (<div className="div1">Div1</div>) 
           : (<div className="div2">Div2</div>)
        }
      </div>
    );
  }
}