1. ホーム
  2. javascript

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