React.js -- 子コンポーネントにプロパティオブジェクトを渡すには?
2023-11-24 12:11:23
質問
というコンポーネントがあります。
tileGroup
というコンポーネントがあり、これは他のプロパティのコレクション(配列)であるプロパティを持っています。
親コンポーネント(
tileGroup
) は、コレクション内のプロパティの各セットを使用して、新しいコンポーネントを作成することによって、子コンポーネントのリストをレンダリングします。
今はセットから子コンポーネントに各プロパティを個別にマッピングしていますが、コンポーネントのプロパティ数が増えると面倒になりますし、よりクリーンでシンプルな方法があるはずです...。
各プロパティを再マップすることなく、子コンポーネントにプロパティのフルセットを渡すにはどうしたらよいでしょうか。
コード例です。
tileGroupData = {someProperty: 'something', someOtherProperty:'something',
tiles: [{vsize:1, hsize:2, etc...}, {vsize:2,hsize:3,title:'whatever'}]};
で、コンポーネント作成...
var tileGroup = React.createClass({
render: function() {
var thechildren = this.props.tiles.map(function(tile)
{
//this is what I DON'T want to be doing.
return <tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>;
//what I DO want to be doing
return <tileSimple allTheProps = {tile}/>;
});
どのように解決するのですか?
どうやらtransferPropsToは非推奨になりつつあるようです。最近のReactではJSXのspread属性が使えるようです。
return <tileSimple {...tile} />;
詳しくはこちら 非推奨のtransferPropsTo
関連
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] JavaScriptでオブジェクトのキー/プロパティの数を効率的にカウントする方法
-
[解決済み】 {this.props.children} に props を渡すには?}
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] これは純関数ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] JavaScriptとLuaの微妙な違い [終了しました]
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)