どのようにHTMLのリアクションコンポーネントをスタイルするのですか

Question

私は配列を使ってマッピングしています。その要素がユーザープロファイルに格納されている場合に背景色を設定したいと考えていますが、このエラーが発生しています。 '不変の違反：style propは、スタイルプロパティから文字列ではなく値へのマッピングを想定しています。たとえば、JSXを使用する場合、style = {{marginRight：spacing + 'em'}}です。このDOMノードがAddingHabit "

 <div>{this.renderHabits().map((habitObject)=>{ 
       return (<div className="addingHabitPic habitpics" key={habitObject.imageLink} id="picplusdiv"> <img src={habitObject.imageLink} height="288" width="197"/> <div style="background-color:black" className="testdiv">Where is text?</div></div>) 
      })} 
     </div> 

によってレンダリングされたブラックは、後に変数に代入されますが、これはちょうどそれが働いて取得することです。私はスタイル= {{背景色：黒}}を試しましたが、エラーは示唆していますが、運はありません。これは、React with Meteorを使用しています。

Answer 1

ほとんどの場合、このマッピングを実行するときには少し異なる構文を使用する必要があります。 dash deliniatedスタイルの代わりに、camelCaseを使用する必要があります（も書きましたが、それは定義されていない変数なので、代わりに文字列'black'が必要です）。次のように動作します：

ほとんどの他のCSSスタイルに同じロジックを適用できます。

Answer 2

Read the docs!

この状況が反応ドキュメントで覆われています。

var divStyle = { 
    backgroundColor: 'black', 
}; 

とあなたのレンダリング呼び出しで<div style = {divStyle}>の操作を行います。あなたのオブジェクトで必見パスを - あなたはstyles小道具に文字列を渡すことはできません。