reactjs - 如何在点击时隐藏另一个 div？在反应 js 中一次只能显示单个 div

Question

我有四个divs我想一次只显示一个 div。

现在 div 根据匹配的按钮显示 onClick 但我想当我单击按钮时只有相对 div 应该显示其他 div 应该隐藏。我怎样才能做到这一点？

我尝试了什么：_

 constructor(){
        super();
        this.state={
            firstDiv:false,
            secondDiv:false,
            thirdDiv:false,
            fourthDiv:false,
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({firstDiv:true})}}>First Btn</li>
<li onClick={()=>{this.setState({secondDiv:true})}}>Second Btn</li>
<li onClick={()=>{this.setState({thirdDiv:true})}}>Third Btn</li>
<li onClick={()=>{this.setState({fourthDiv:true})}}>Fourth Btn</li>
</ul>
            

{
    this.state.firstDiv ?
    <div>first Div</div>
:null        
}

{
    this.state.secondDiv ?
    <div>second Div</div>
:null        
}

{
    this.state.thirdDiv ?
    <div>third Div</div>
:null        
}

{
    this.state.fourthDiv ?
    <div>fourth Div</div>
:null        
}


            </div>
)
}

谢谢你！

Answer 1

你可以使用这样的东西。Div 将根据数字呈现。

// Example class component
class ReactComponent extends React.Component {
  
  state = {
    visibleDiv: 0
  }
  switchVisibleDiv(divNumber) {
    this.setState({...this.state, visibleDiv: divNumber})
  }
  
  render() {
    return (
      <div>
        <ul>
          <li onClick={()=> this.switchVisibleDiv(1)}>set div 1</li>
          <li onClick={()=> this.switchVisibleDiv(2)}>set div 2</li>
          <li onClick={()=> this.switchVisibleDiv(3)}>set div 3</li>
          <li onClick={()=> this.switchVisibleDiv(4)}>set div 4</li>
        </ul>
        {this.state.visibleDiv === 1 ? <div>Div 1</div> : ''}
        {this.state.visibleDiv === 2 ? <div>Div 2</div> : ''}
        {this.state.visibleDiv === 3 ? <div>Div 3</div> : ''}
        {this.state.visibleDiv === 4 ? <div>Div 4</div> : ''}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <ReactComponent />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

您可以初始化一个变量，该变量存储您想要显示的内容 将其设置为您想要在单击 li 按钮时显示的 div 名称。

 constructor(){
        super();
        this.state={
           showDiv: null
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({showDiv:'first'})}}>First Btn</li>
<li onClick={()=>{this.setState({showDiv:'second'})}}>Second Btn</li>
<li onClick={()=>{this.setState({showDiv:'third'})}}>Third Btn</li>
<li onClick={()=>{this.setState({showDiv:'fourth'})}}>Fourth Btn</li>
</ul>
            

{
    this.state.showDiv==='first' ?
    <div>first Div</div>
:null        
}

{
   this.state.showDiv==='second'?
    <div>second Div</div>
:null        
}

{
    this.state.showDiv==='third'?
    <div>third Div</div>
:null        
}

{
    this.state.showDiv==='fourth'?
    <div>fourth Div</div>
:null        
}


            </div>
)
}