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}/>;
});
quelle
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});
quelle
React.createFactory(tileSimple)(tile);
. Siehe fb.me/react-legacyfactory .key
while-Zuordnung über ein Array vontitleSimple
sSie können in Ihrem Rendering einfach Folgendes tun
return this.transferPropsTo(<tileSimple />);
quelle
Was schlagen Sie vor, zu tun,
return <tileSimple allTheProps={tile} />;
funktioniert gut.
Innerhalb der
tileSimple
Komponente 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;
quelle
this.props.childAllTheProps.vsize
). Was vermisse ich?this.FirstChildPropsWrapper.SecondChildPropsWrapper.ThirdChildPropsWRapper.FourthChildPropsWrapper.etc