Question

我使用<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'那里。

Answer 1

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

('{null}')

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

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

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

Answer 2

如果状态与1

没有区别，您可能想要省略整个bsStyle属性

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

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

2 个答案: