使用多个输入反应内联样式

Question

我们如何在React元素上实现内联样式的“填充：0 10px”之类的东西？如果我给padding或margin属性提供快捷语法，则抛出一个错误，所以我必须显式声明paddingTop，paddingRight等。我没有看到React文档中的任何内容来解决这个问题，所以我想知道它是否可能在React中使用快捷方式？

Answer 1

你可能有一个拼写错误或意外写错了。应用内联样式的语法遵循此模式。

{{property: 'value'}} 您无法在属性值中添加分号。

内联样式表示为反应对象。并且在反应渲染方法中应用属性或读取某些东西作为javascript的语法也用大括号表示。

因此，要将其应用于您的具体问题，您只需执行此操作。

<div style={{margin: '0px 10px'}} />

如果您使用的是在返回渲染函数之前定义的样式变量，则可以像这样使用它。

const divStyles = {
    margin: '0px 10px'
}

// ... in the render return

<div style={divStyles} />

Sample Fiddle with shortcut padding and margin used