web-dev-qa-db-ja.com

React.js-プロパティオブジェクトを子コンポーネントに渡す方法

他のプロパティのコレクション（配列）であるプロパティを持つ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}/>; 
       });
javascriptpropertiesparent-childreactjs
69
Matt Foxx Duncan

どうやらtransferPropsToは非推奨になりました。 Reactの最新バージョンでは、JSXスプレッド属性を使用できます。

return <tileSimple {...tile} />;

これに関する詳細はこちら： transferPropsToの廃止

126
actionshrimp

これらのユースケースで最も簡単なのは、JSXではなくJS APIにフォールバックすることです。

return tileSimple(tile);

なぜ機能するのかを理解するには、JSXコンパイラツール（ http://facebook.github.io/react/jsx-compiler.html ）を使用して、目的のバージョンの生成バージョンを確認します。

<tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>;
tileSimple( {vsize:  tile.vsize, hsize:  tile.hsize, content:  tile.content});
32
Vjeux

実際にレンダーで次のことを行うことができます

return this.transferPropsTo(<tileSimple />);
6
Ryan Seddon

あなたが提案すること、

return <tileSimple allTheProps={tile} />;

うまく動作します。

tileSimpleコンポーネント内では、次のような構文を使用してプロパティにアクセスできるはずです。

var vsize = this.props.allTheProps.vsize;
var hsize = this.props.allTheProps.hsize;
0
lostriebo