Wie zur CSS-Anzeige: Keine innerhalb der Bedingung mit React JSX?

Question

Ich versuche, eine div auf der gleichen Seite zu rendern, wenn der Benutzer auf einen Link klickt.

Meine HTML-Seite:

<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> 

Mein 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> 
    ); 
    } 
}); 

Aber ich bekomme ein:

SyntaxError: unknown: Unexpected token

Für diese Strecke:

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

Wie kann ich in einem Stil bedingt nisten?

Answer 1

Dies liegt an der falschen Verwendung des ternären Operators. Siehe Dokumentation hier: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Sie sollten es nicht mit {} umwickeln, wie Sie getan haben.

Versuchen Sie Folgendes:

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

Answer 2

Sie können auch das Element über

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