如果改变样式值，则反应jsx内联

Question

我知道如何在jsx中使用if if short hand in jxs中的不同类，但是我怎么能用样式呢？

说我有一个循环，我需要检查属性是否存在，如果是，将余额10添加到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} : {}} /> 

您可以阅读更多相关信息here