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

72

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}/>; 
       });
Matt Foxx Duncan
quelle

Antworten:

128

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

Actionshrimp
quelle
1
Ich liebe es, tolle Antwort.
Jakub Krol
Meine Güte, das ist ein verdammt guter Hack. Danke für das Teilen.
Oo -_- oO
32

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});
Vjeux
quelle
Danke, der Live-Editor ist genau das, was ich brauchte! Das funktioniert perfekt.
Matt Foxx Duncan
würde nicht nur tileSimple (tile); Arbeit? Requisiten sollen unveränderlich sein, daher würde ich vermuten, dass eine einfache Objektreferenz ausreichen würde.
Jason Rice
1
Bei React 13+ würden Sie verwenden React.createFactory(tileSimple)(tile);. Siehe fb.me/react-legacyfactory .
Brian
Dies wird nicht funktionieren, wenn Sie eine keywhile-Zuordnung über ein Array von titleSimples
avalanche1
6

Sie können in Ihrem Rendering einfach Folgendes tun

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

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;
lostriebo
quelle
1
Das Problem bei dieser Lösung ist, dass ich immer mehr "Wrapper" -Eigenschaften habe, die ich durchlaufen muss, um ein paar Knoten nach unten zu gehen. Die Lösung @Vjeux funktioniert jedoch!
Matt Foxx Duncan
@MattFoxxDuncan Ich stimme zu, dass die @ Vjeux-Lösung eleganter ist. Ich verstehe jedoch nicht, was Sie unter einem ständig wachsenden Satz von Wrapper-Eigenschaften verstehen. Wenn Sie allTheProps an eine untergeordnete Komponente übergeben haben, greifen Sie immer noch auf dieselbe Weise darauf zu (dh this.props.childAllTheProps.vsize). Was vermisse ich?
Lostriebo
1
Die Komponentenstruktur, die ich mir vorstelle, beinhaltet das Schreiben unabhängiger Komponenten (wie es Reacts Philosophie ist), aber deren Erstellung durch die übergeordnete Komponente (falls vorhanden), zu der sie gehören. In einem Szenario, in dem ich Seitenmaster -> Abschnitt -> Kachelgruppe -> Kachel (Typ) -> Kachelinhalt -> etwas anderes habe, besteht das Potenzial für mehr als 5 Wrapper in dieser Kette. Dies wäre also kein vernünftiges Objekt, um es zu durchqueren this.FirstChildPropsWrapper.SecondChildPropsWrapper.ThirdChildPropsWRapper.FourthChildPropsWrapper.etc
Matt Foxx Duncan