[解決済み] React JSXでconditional内のdisplay:noneをCSSする方法？

質問

をレンダリングしようとしています。 div をクリックすると、同じページに表示されます。

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

私の 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>
    );
  }
});

が出るんだけど。

SyntaxError: unknown: 予期しないトークン

この行の場合

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

スタイルの内部で条件付きネストを行うには？

どのように解決するのですか？

三項演算子の使い方が間違っていることが原因です。 こちらのドキュメントをご覧ください。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

でラップしてはいけません。 {} のようにします。

以下を試してみてください。

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