如果其他改变样式值，则内联响应 jsx

Question

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

说我有一个循环，我需要检查一个属性是否存在，如果是，将前 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} : {} ),
}} />