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

时间:2017-07-01 16:58:56

标签: javascript reactjs react-jsx react-bootstrap

我使用<ListGroup><ListGroupItem>渲染带有react和react-bootstrap的页面。以下是我的代码,我尝试在状态不是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}的正确方法是什么?

EDITED:假设是'{null}'而不是'{null'那里。

2 个答案:

答案 0 :(得分:3)

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

('{null}')

从字面上评估"{null}"。试试这个:

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

明白地使用null,不要用引号括起来。这是a JSFiddle example

答案 1 :(得分:2)

如果状态与1

没有区别,您可能想要省略整个bsStyle属性
<ListGroupItem
   key={`table.${table.id}`}
   header=(table.name)
   {...( table.status !== '1' ? {bsStyle:'info'} : {} )}
  >