web-dev-qa-db-fra.com

React.js - Comment passer un objet de propriétés au composant enfant?

J'ai un composant appelé tileGroup qui a une propriété qui est une collection (tableau) d'autres propriétés.

Le composant parent (tileGroup) affiche la liste des composants enfants en utilisant chaque ensemble de propriétés de la collection pour créer un nouveau composant.

À l'heure actuelle, je mappe individuellement chaque propriété de l'ensemble vers le composant enfant, mais cela deviendra fastidieux si le nombre de propriétés pour un composant augmente et que je suis sûr qu'il existe un moyen plus simple et plus propre de le faire ...

Comment puis-je transmettre l'ensemble des propriétés au composant enfant sans remapper chaque propriété?

Exemple de code:

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

puis création de composant ..

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

Apparemment, transferPropsTo est obsolète. Avec les versions récentes de React, vous pouvez utiliser les attributs de propagation JSX:

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

Plus d'informations à ce sujet ici: Deprecating transferPropsTo

126
actionshrimp

Pour ces cas d'utilisation, le plus simple est de recourir à l'API JS au lieu de JSX.

return tileSimple(tile);

Pour comprendre pourquoi cela fonctionne, regardez la version générée de la version souhaitée à l'aide de l'outil Compilateur 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

Vous pouvez réellement faire ce qui suit dans votre rendu

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

Ce que vous proposez de faire,

return <tileSimple allTheProps={tile} />;

fonctionne très bien.

Dans le composant tileSimple, vous devriez alors pouvoir accéder aux propriétés en utilisant la syntaxe suivante:

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