Css встроенный стиль как атрибут в компоненте React

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

Вам нужно всего лишь включить первые {}, когда вы находитесь непосредственно внутри 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 2

Вашей недвижимости стиль должен быть литерал объекта, что-то вроде этого:

item.style = { 
display: 'inline' 
} 

Answer 3

В реакции вы можете определить свои стили в виде объектов JS, что-то вроде

style: {{display: 'inline'}} 

Answer 4

Вы можете абстрактные это еще и есть JS файл, содержащий все стили для вашей страницы:

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

то в коде ...

<Component style={styles.myElement} />