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

我正在使用<ListGroup>和<ListGroupItem>來渲染頁面，並使用react和react-bootstrap。以下是我的代碼，當狀態不是'1'時，我嘗試使用bsStyle='info'，當狀態爲'1'時，請將其留空。如何在三元表達式中使用null？

<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'在那裏。

來源

2017-07-01 Yen Sheng

你可能想ommit的情況下，狀態全bsStyle屬性不是從1

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

來源

2017-07-01 17:13:46

其實我更喜歡這個，而不是在任何地方設置一個道具來傳遞null。 – trixn

這兩個工程，但這看起來更乾淨。謝謝！ –

你的三元運算符的第二個操作數關：

('{null}')

計算結果爲字面上"{null}"。試試這個：

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

只需使用null明明白白，不要用引號把它包起來。這裏是a JSFiddle example。

來源

2017-07-01 17:02:53 Li357

不同老實說，我有點驚訝的是，返回'「{空」'繞過驗證... –

@PatrickRoberts其實，[它確實會拋出一個錯誤]（http://jsfiddle.net/Lv6wemmj/3/）OP只是沒有這麼說。 – Li357

這是一個錯字，我的意思是{null}，上面已經編輯過。 https://github.com/react-bootstrap/react-bootstrap/issues/306 –

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

回答

相關問題