三項式ではどうやってnullを使うのですか？

Question

<ListGroup>と<ListGroupItem>を使用して、反応と反応ブートストラップを持つページをレンダリングしています。私のコードは以下の通りです。ステータスが'1'でない場合はbsStyle='info'を使用し、ステータスがの場合は空白のままにしています。

<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

あなたはおそらく、ケースの状態で全体bsStyle属性をOMMITしたいことは正直言って1

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

Answer 2

あなたの三項演算子の第2オペランドはオフになっている：

('{null}') 

文字通り"{null}"に評価されます。これを試してみてください：

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

ただ、引用符でそれをラップしていない、はっきりnullを使用しています。ここにはa JSFiddle exampleがあります。