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

Question

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

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>
    );
  }
}