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

Posted 2023-02-22

【中文标题】reactjs - 如何隐藏一个div并将其替换为reactjs中的另一个div？

【英文标题】：How to hide a div and replace it with another div in reactjs?

【发布时间】：2018-08-24 03:09:49

【问题描述】：

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

【问题讨论】：

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

【参考方案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>
  );