如何使用 React JSX 在条件内 CSS 显示：无？

IT技术 javascript reactjs
2021-05-22 08:01:59

div当用户单击链接时，我试图在同一页面上呈现 a 。

我的 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'} }}

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

3个回答

这是由于三元运算符的错误使用造成的。请参阅此处的文档：https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

你不应该{}像你所做的那样把它包裹起来。

请尝试以下操作：

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

您还可以在 CSS 中更改类名和样式。 

// outside render
const NORMAL = "row account stores"
const HIDDEN = NORMAL + " hidden"

// In render
render: function() {
  return(
    <div className={this.state.showStore ? NORMAL : HIDDEN}>
      <div>a lot more divs</div>
        </div>
  );
}

请注意，通常最好不要在渲染函数中使用双花括号 {{，因为您经常在每次渲染执行时创建一个新对象。例如：

{display: true ? 'block' : 'none' } === {display: true ? 'block' : 'none' } // false

// outside render
const BLOCK = {diplay: 'block'}
const NONE= {diplay: 'none'}

// in render
{this.state.showStore ? BLOCK : NONE}

您还可以通过有条件地创建元素

   { 
     this.state.showStore 
     ? <div className="row account stores">
        <div>a lot more divs</div>
       </div> 
     : null 
   }
其它你可能感兴趣的问题
上一篇react：为什么是静态 propTypes 下一篇奇怪的线条和较小的高度