Reagiere konditional unterschiedliche divs

Question

Ich versuche, divs zwei und drei bedingt zu öffnen, schaue dir folgendes Snippet an. showThird funktioniert korrekt, showSecond hat keine Wirkung? Grundsätzlich auf ShowSecond div-one schrumpft auf 50% Breite und div-two erscheint in Ruhe 50%. Ähnlich mit div-Drittel.

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      showSecond: false, 
 
      showThird: false 
 
     } 
 

 
     this.showDivTwo = this.showDivTwo.bind(this) 
 
     this.showDivThree = this.showDivThree.bind(this) 
 
    } 
 
    
 
    showDivTwo() { 
 
     this.setState(prevState => ({showThird: false, showSecond: !prevState.showSecond})) 
 
     console.log(this.state) 
 

 
    } 
 
    showDivThree() { 
 

 
     this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird})) 
 
     console.log(this.state) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className={'wrapper' + (this.state.showSecond ? ' show' : '', this.state.showThird ? ' show' : '')}> 
 

 
       <div className="one">one 
 
        {/* Show second */} 
 
        <div> 
 
         <button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button> 
 
        </div> 
 

 
        {/* Show third */} 
 
        <div> 
 
         <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button> 
 
        </div> 
 
       </div> 
 

 
       <div className="three">three 
 
        <div> 
 
         <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button> 
 
        </div> 
 
       </div> 
 
       <div className="two">two 
 
        <div> 
 
         <button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
);

.wrapper { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.one, .two, .three { 
 
    background: #333; 
 
    border: 2px solid #787567; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    overflow: hidden; 
 
    padding: 20px; 
 
    text-align: center; 
 
    transition: border 0.2s, padding 0.2s, width 0.2s; 
 
    min-height: 50vh; 
 

 
} 
 

 
.one { 
 
    width: 100%; 
 
} 
 
.two { 
 
    border-width: 2px 0; 
 
    padding: 20px 0; 
 
    width: 0; 
 
} 
 

 
.three { 
 
    border-width: 2px 0; 
 
    padding: 20px 0; 
 
    width: 0; 
 
} 
 

 
.show .one, .show .two, .show .three { 
 
    border-width: 2px; 
 
    padding: 20px; 
 
    width: 50%; 
 
}

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

Was mache ich hier falsch?

Answer 1

Änderungen:

1- Verwendung dieser Zustand:

className={'wrapper' + (this.state.showSecond || this.state.showThird ? ' show' : '')} 

2- Verwenden Sie eine weitere Klasse hide, und setzen Sie den Scheck auf className gelten, dass class, wenn Sie die div sonst ausblenden möchten anwenden Klasse two or three.

Überprüfen Sie den Arbeitscode:

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      showSecond: false, 
 
      showThird: false 
 
     } 
 

 
     this.showDivTwo = this.showDivTwo.bind(this) 
 
     this.showDivThree = this.showDivThree.bind(this) 
 
    } 
 
    
 
    showDivTwo() { 
 
     this.setState(prevState => ({showThird: false, showSecond: !prevState.showSecond})) 
 
     console.log(this.state) 
 

 
    } 
 
    showDivThree() { 
 

 
     this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird})) 
 
     console.log(this.state) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className={'wrapper' + (this.state.showSecond || this.state.showThird ? ' show' : '')}> 
 

 
       <div className="one"> 
 
        one 
 
        <div> 
 
         <button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button> 
 
        </div> 
 

 
        <div> 
 
         <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button> 
 
        </div> 
 
       </div> 
 
       <div className={this.state.showThird?"three":'hide'}> 
 
        three 
 
        <div> 
 
         <button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button> 
 
        </div> 
 
       </div> 
 
       <div className={this.state.showSecond ? "two" : 'hide'}>two 
 
        <div> 
 
         <button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
);

.wrapper { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.hide, .one, .two, .three { 
 
    background: #333; 
 
    border: 2px solid #787567; 
 
    box-sizing: border-box; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    overflow: hidden; 
 
    padding: 20px; 
 
    text-align: center; 
 
    transition: border 0.2s, padding 0.2s, width 0.2s; 
 
    min-height: 50vh; 
 
} 
 

 
.one { 
 
    width: 100%; 
 
} 
 

 
.hide { 
 
    border-width: 2px 0; 
 
    padding: 20px 0; 
 
    width: 0; 
 
} 
 

 
.show .one, .show .two, .show .three { 
 
    border-width: 2px; 
 
    padding: 20px; 
 
    width: 50%; 
 
}

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