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

Question

我正在使用 <ListGroup> 和 <ListGroupItem> 渲染带有 react 和 react-bootstrap 的页面。以下是我的代码，当状态不是'1'时，我尝试使用bsStyle='info'，而当状态为'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.

Answer 2

您可能希望省略整个 bsStyle 属性，以防状态与 1 相同

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

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

How do I use null within a ternary expression?

javascript

reactjs

react-jsx

react-bootstrap