###前提・実現したいこと
Laravel5.1をベースにフロントエンドの一部をReact.jsを使用して描画しています。
React.jsはJSXを使用して記述しています。
作成しているサイトではユーザーごとに自由な色を設定でき、その色をカラーコードで記録しています。
そのデータを取得し、設定したカラーでテキストを装飾するというのが目標です。
###発生している問題・エラーメッセージ
カラーを自由に設定でき、カラーコードで記録していることから、事前にClass化してreact内でclassNameとして記述することができません。
可変するスタイルをどのようにReact.js内で適用したらよいでしょうか。
###該当のソースコード
lang
1// usersデータは親コンポーネントからthis.props.usersの形で渡されています。 2 var Sample = React.createClass({ 3 render: function () { 4 var style = { 5 color: { 6 color: {} // このカラーの部分にpropsに保存されているカラーコードを設定したい 7 } 8 }; 9 10 var UserNode = this.props.users.map(function (user) { 11 return ( 12 <li key={user.id}><span style={style.color}>{user.name}</span></li> 13 ) 14 }); 15 16 return ( 17 <ul>{UserNode}</ul> 18 ); 19 } 20 });
###補足情報(言語/FW/ツール等のバージョンなど)
Laravel 5.1
react-15.0.2.js
react-dom-15.0.2.js
browser.min.js 5.8.23
react-bootstrap.min.js
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。