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

我有自定义组件，其中我映射属性。在这个组件中，我有标签分配了CSS类。但我也想要这个标签可选的内联样式。问题是，在反应中我需要用大括号包围内联样式，我无法将它们转义或在组件中正确设置它们。如何解决这个问题？作为React组件中的属性的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 
     }]} 
    />

来源

2017-02-22 user1974566

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

当您直接在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。

来源

2017-02-22 09:22:10 Noctisdark

是的它的工作原理，感谢您的帮助:) – user1974566

很高兴可以使用。 – Noctisdark

你的样式属性代码必须是一个对象文本，像这样：

item.style = { 
display: 'inline' 
}

来源

2017-02-22 08:45:01

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

style: {{display: 'inline'}}

来源

2017-02-22 08:46:43 Abhishek

您可以抽象这进一步，有一个JS文件来保存你的页面的所有样式：

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

然后在代码...

<Component style={styles.myElement} />

来源

2017-02-22 09:45:19

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

回答

相关问题