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

【问题标题】：How to hide a div and replace it with another div in reactjs?reactjs - 如何隐藏一个div并将其替换为reactjs中的另一个div？
【发布时间】：2018-08-24 03:09:49
【问题描述】：

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

【问题讨论】：

只是有条件地渲染一个或另一个，并在单击按钮时更改条件。您可以将条件存储在状态中

标签： html reactjs css ecmascript-6 redux

【解决方案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>
    );
  }
}

【讨论】：

【解决方案2】：

您可以通过在组件的状态中添加一个新属性来实现它。单击按钮将简单地切换该状态，并且由于 setState 方法，组件将重新渲染。请注意，这将在两个 div 之间切换。如果您只想显示第二个，请像这样设置新状态：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>
    );
  }
}

【讨论】：

【解决方案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 我想要反应中的解决方案，而不是 jquery :)

【解决方案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>
  );
}

}

【讨论】：