Reactコンポーネントの属性としてCSSインラインスタイル

Question

私は属性をマップするカスタムコンポーネントを持っています。 このコンポーネントには、CSSクラスが割り当てられたラベルがあります。 しかし、このラベルにはオプションのインラインスタイルも必要です。 問題は、反応では、中括弧でインラインスタイルを囲む必要があるため、それらをエスケープしたり、コンポーネントで正しく設定することができないということです。これを解決するには？コンポーネントから

コード：

item.style = { 
display: 'inline' 
} 

Answer 1

Virutal DOM Objectのすぐ内側にある場合は、最初に{}を含める必要があります。 <... items={object} .../>とし、オブジェクトは他のものと全く同じ方法で書く必要があります。Object Literalsあなたは

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

私はCodepenで、このためのペンを作ったに{display: 'inline'}代わりの{{display: 'inline'}}を必要とされていることを、あなたはそれHereを確認することができます。

Answer 2

あなたのスタイルプロパティ.jsxのレンダリングから

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

コードは、オブジェクトリテラルであることをそうのようなものを持っていますJSオブジェクトの形式でスタイルを定義することができます。

style: {{display: 'inline'}} 

Answer 3

反応で：

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

Answer 4

あなたはこれをさらに抽象化することができますし、あなたのページのすべてのスタイル保持JSファイルしている：

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

は、コードに...

<Component style={styles.myElement} />