javascript - 如何在三元表达式中使用 null？

Question

我正在使用 <ListGroup> 渲染一个带有 react 和 react-bootstrap 的页面和 <ListGroupItem> .以下是我的代码，我正在尝试使用 bsStyle='info'当状态不是 '1' 时, 当状态为 '1' 时留空.

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

它呈现正确但由于 bsStyle 的验证不断收到以下警告:

Warning: Failed prop type: Invalid prop `bsStyle` of value `` supplied to `ListGroupItem`, expected one of ["success","warning","danger","info"].

有一个变通方法可以通过设置 bsStyle={null} 来逃避验证。 .但是我无法让它在三元表达式中工作。以下代码将使它成为一个字符串 bsStyle='{null}' .

<ListGroup>
  {tables.map(table => (
    <ListGroupItem
      key={`table.${table.id}`}
      header=(table.name)
      bsStyle={table.status !== '1' ? ('info') : ('{null}')}
      >
      {table.content} - 
    </ListGroupItem>
  ))}
</ListGroup>

传递{null}的正确方法是什么？没有把它变成一个字符串？

已编辑:上面应该是“{null}”而不是“{null”。

Answer 1

您的三元运算符的第二个操作数已关闭:

('{null}')

计算结果为 "{null}"。试试这个:

bsStyle={table.status !== '1' ? 'info' : null}

直接使用null即可，不要用引号括起来。这是 a JSFiddle example .