React.js - Wie übergebe ich ein Eigenschaftenobjekt an eine untergeordnete Komponente?

Ich habe eine Komponente namens tileGroup, die eine Eigenschaft hat, die eine Sammlung (Array) anderer Eigenschaften ist.

Die übergeordnete Komponente ( tileGroup) rendert eine Liste der untergeordneten Komponenten, indem jeder Satz von Eigenschaften in der Auflistung zum Erstellen einer neuen Komponente verwendet wird.

Im Moment ordne ich jede Eigenschaft aus dem Satz einzeln der untergeordneten Komponente zu, aber dies wird umständlich, wenn die Anzahl der Eigenschaften für eine Komponente zunimmt und ich bin sicher, dass es eine sauberere und einfachere Möglichkeit gibt, dies zu tun ...

Wie kann ich den vollständigen Satz von Eigenschaften an die untergeordnete Komponente weitergeben, ohne jede Eigenschaft neu zuzuordnen?

Beispielcode:

tileGroupData = {someProperty: 'something', someOtherProperty:'something', 
                tiles: [{vsize:1, hsize:2, etc...}, {vsize:2,hsize:3,title:'whatever'}]};

und dann Komponentenerstellung ..

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}/>; 
       });

Anscheinend wird transferPropsTo nicht mehr unterstützt. In neueren Versionen von React können Sie JSX-Spread-Attribute verwenden:

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

Weitere Infos dazu hier: Verwerfen von transferPropsTo

In diesen Anwendungsfällen ist es am einfachsten, anstelle von JSX auf die JS-API zurückzugreifen.

return tileSimple(tile);

Sehen Sie sich die generierte Version der gewünschten Version mit dem JSX-Compiler-Tool an ( http://facebook.github.io/react/jsx-compiler.html ) , um zu verstehen, warum dies funktioniert.

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

Sie können in Ihrem Rendering einfach Folgendes tun

return this.transferPropsTo(<tileSimple />);

Was schlagen Sie vor, zu tun,

return <tileSimple allTheProps={tile} />;

funktioniert gut.

Innerhalb der tileSimpleKomponente sollten Sie dann in der Lage sein, auf die Eigenschaften mit der folgenden Syntax zuzugreifen:

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