小编典典

如何在React JSX中CSS显示:没有条件?

reactjs

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

但我得到一个:

语法错误:未知:意外的令牌

对于此行:

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

如何有条件地嵌套在样式中?


阅读 274

收藏
2020-07-22

共1个答案

小编典典

这是由于三元运算符的使用不正确。在此处查看文档:https
:
//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

您不应该{}像这样做那样将其包装起来。

尝试以下方法:

style={{display: this.state.showStore ? 'block' : 'none' }}
2020-07-22