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

Question

I have custom component in which i map attributes. In this component I have label which have css class assigned. But i also want optional inline style for this label. The problem is that in react I need to surround inline style with curly braces and i can't escape them or set them correctly in component. How to resolve this?

Code from component:

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>
);

Code from rendered .jsx

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

Answer 1

Your style property have to be an object literal, something like so :

item.style = {
 display: 'inline'
}

Answer 2

在反应中，您可以以JS对象的形式定义样式，例如

  style: {{display: 'inline'}}

Answer 3

You only need to include the first {} when you are directly inside a Virutal DOM Object . <... items={object} .../> and then object should be written exactly the same way as other Object Literals . That being said you need {display: 'inline'} instead of {{display: 'inline'}} in

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

I've made a pen for this in Codepen , you can check it Here .

Answer 4

You can abstract this further and have a JS file holding all the styles for your page:

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

then in the code...

<Component style={styles.myElement} />