如果改变样式值，则内联响应 JSX

Question

我知道如何在jsx中使用不同的类，但是我如何在jxs中使用其他简写，但是我怎样才能用样式来做到这一点呢？

说我有一个循环，我需要检查是否存在属性，如果是，将保证金前 10 名添加到div？

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

Answer 1

使用内联 if-else：

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

您可以在此处阅读更多相关信息

Answer 2

你可以

这样做：

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

或者像这样：

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

或使用扩展运算符的更复杂的样式：

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