html - 如何在reactjs中隐藏一个div并用另一个div替换它？

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

最佳答案

创建一个状态来指示是要显示 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>
    );
  }
}

关于html - 如何在reactjs中隐藏一个div并用另一个div替换它？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49297212/