Css 内联样式作为 React 组件中的属性答案

【问题标题】：Css inline style as an attribute in React componentCss 内联样式作为 React 组件中的属性
【发布时间】：2017-02-22 08:40:35
【问题描述】：

我有自定义组件，我在其中映射属性。在这个组件中，我有分配了 css 类的标签。但我也想要这个标签的可选内联样式。问题是，在反应中，我需要用花括号包围内联样式，我无法转义它们或在组件中正确设置它们。如何解决？

组件代码：

const CustomComponent = ({items, name}) => (
    <fieldset>
        {items
            .map((item, index) => ({item, id: `${name || 'dod'}-${item.value || index}`}))
            .map(({item, id}) =>
                <div key={id}
                     className="className1">
                    <input
                        id={id}
                        name={name}
                        type="text"
                    />
                    <label htmlFor={id} className="className" style={item.style}>
                        {item.label}
                    </label>
                </div>
            )}
    </fieldset>
);

来自渲染的 .jsx 的代码

  <CustomComponent             
       name="name"
       items={[{
           value: 'value',
           label: 'label',
           style: {{display: 'inline'}}      -> not working
       }]}
  />

【问题讨论】：

你能告诉我们更多代码吗？ item.style 的类型是什么？它必须是一个对象文字？如果您正在映射，请使用key。

标签： javascript html css reactjs

【解决方案1】：

当您直接位于Virutal DOM Object 中时，您只需包含第一个{}。 <... items={object} .../> 然后 object 应该以与其他 Object Literals 完全相同的方式编写。话虽如此，您需要{display: 'inline'} 而不是{{display: 'inline'}} in

<CustomComponent             
   name="name"
   items={[{
       value: 'value',
       label: 'label',
       style: {{display: 'inline'}}      -> not working //use {display: 'inline'}
   }]}
/>

我已经为此在Codepen制作了一支笔，你可以查看它Here。

【讨论】：

很高兴被使用。

【解决方案2】：

你的样式属性必须是一个对象字面量，像这样：

item.style = {
 display: 'inline'
}

【讨论】：

【解决方案3】：

在 react 中你可以用 JS 对象的形式定义你的样式，比如

  style: {{display: 'inline'}}

【讨论】：

【解决方案4】：

您可以进一步抽象它，并拥有一个包含页面所有样式的 JS 文件：

const styles = {
  myElement: {
    display: 'inline'
  }
}

然后在代码中...

<Component style={styles.myElement} />

【讨论】：