Jak wyświetlić CSS: brak w ramach warunku z React JSX?

Question

Próbuję renderować div na tej samej stronie, gdy użytkownik kliknie łącze.

Moja strona HTML:

<div class="stores"> 
    <h1>Stores</h1> 
    <ul class="stores"> 
    <li><a href="#" onClick={this.onClick} >Store A</a></li> 
    <li>Store B</li> 
    <li>Store C</li> 
    </ul> 
</div> 

My components/store.js.jsx:

var Store = React.createClass({ 
    getInitialState: function() { 
    return { showStore: false }; 
    }, 
    onClick: function() { 
     this.setState({ showStore: true }); 
    }, 
    render: function() { 
    return(
    <div className="row account stores" style={{display: { this.state.showStore ? 'block' : 'none'} }}> 
     <div>a lot more divs</div> 
     </div> 
    ); 
    } 
}); 

Ale otrzymuję:

SyntaxError: unknown: Unexpected token

dla tej linii:

style={{display: { this.state.showStore ? 'block' : 'none'} }} 

Jak zagnieżdżać się warunkowo w stylu?

Answer 1

Jest to spowodowane niewłaściwym użyciem operatora trójskładnikowego. Zobacz dokumentację tutaj: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Nie powinieneś owijać go tak, jak to uczyniłeś, {}.

Spróbuj wykonać następujące czynności:

style={{display: this.state.showStore ? 'block' : 'none' }} 

Answer 2

Można również warunkowo utworzyć element poprzez

{ 
    this.state.showStore 
    ? <div className="row account stores"> 
     <div>a lot more divs</div> 
     </div> 
    : null 
    }