Question

我有自定义组件，其中我映射属性。在这个组件中，我有标签，分配了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
       }]}
  />

Answer 1

你的style属性必须是一个对象文字，如下所示：

View

Answer 2

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

  style: {{display: 'inline'}}

Answer 3

当您直接进入{}时，您只需要包含第一个Virutal DOM Object。 <... items={object} .../>然后对象应该与其他Object Literals完全相同。话虽如此，您需要{display: 'inline'}而不是

中的{{display: 'inline'}}

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

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

Answer 4

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

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

然后在代码中......

<Component style={styles.myElement} />

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

4 个答案: