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

Question

有两个div，div1和div2。 初始状态下，div1显示，div2隐藏。 点击按钮后，div1应该被隐藏，并且div2应该在div1的位置上显示。

- Cris

---

只需有条件地渲染其中一个，并在点击按钮时更改条件。您可以将条件存储在状态中。 - Jayce444

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

- KapilDev Neupane

Answer 2

您可以通过在组件的状态中添加一个新属性来实现它。单击按钮将简单地切换该状态，由于setState方法，组件将重新渲染。请注意，这将在两个

之间切换。如果您只想显示第二个

，请像这样设置新状态：this.setState({firstDivIsActive: false})。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstDivIsActive: true
    };
  }

  render() {
    let activeDiv;

    if (this.state.firstDivIsActive) {
      activeDiv = <div>I am one</div>;
    } else {
      activeDiv = <div>I am two</div>;
    }

    return (
      <div>
        <button
          onClick={() => {
            this.setState({
              firstDivIsActive: !this.state.firstDivIsActive
            });
          }}
        >
          Toggle Div
        </button>
        {activeDiv}
      </div>
    );
  }
}

- Andrei Rosu

Answer 3

我会用简单的HTML和JQuery来实现以下操作：

<input id="DivType" type="hidden" value="div1" class="valid" />
<div id="div1" />
<div id="div2" />


function ToggleDiv() {
    var divType = $("#DivType").val();

    if (divType === "div1") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div2";
    }
    else if (divType === "div2") {
        $("#div1").show();
        $("#div2").hide();
        $('#DivType input').value = "div1";
    }
}

ToggleDiv 函数将在按钮的 OnClick 事件中被调用。

不确定在 React 中是否有更好的方法来实现这个功能。

- RinoTom

---

@RinoTom 我想要React的解决方案，而不是jQuery :) - Cris

Answer 4

类 ToggleDivs 继承自 React.Component {

state = {
  showDiv1: true,
}

handleButtonClick() {
  this.setState({
    showDiv1: !this.state.showDiv1
  });
}

render() {
  const { showDiv1 } = this.state;
  const buttonTitle = showDiv1 ? 'Div2' : 'Div1';

  const div1 = (<div className="div1">Div1</div>);
  const div2 = (<div className="div2">Div2</div>);

  return (
    <div>
      <button onClick={() => this.handleButtonClick()}>Show {buttonTitle}</button>
      {showDiv1 ? div1 : div2}
    </div>
  );
}

}

- jagadeesh kadavakollu