如果改變樣式值，則反應jsx內聯

Question

我知道如何在jsx中使用不同的類，如果在jxs中使用if else，但我怎么能用樣式做呢？

說我有一個循環，我需要檢查一個屬性是否存在，如果是，添加前十名到一個div？

<div style={{marginTop:10}} /> 

Answer 1

你可以這樣做：

<div style={present ? {marginTop:10} : {}} /> 

或者像這樣：

<div style={{marginTop: present ? 10 : 0 }} /> 

或者帶有傳播運算符的更復雜的風格

<div style={{
  marginLeft:10,
  ...( present ? {marginTop:10} : {} ),
}} /> 

Answer 2

使用內聯if-else：

<div style={isMarginNeeded ? {marginTop:10} : {}} /> 

你可以在這里閱讀更多相關信息