javascript - react - redux

React.js-¿Cómo pasar propiedades objeto a componente hijo?

Question

Tengo un componente llamado tileGroup que tiene una propiedad que es una colección (matriz) de otras propiedades.

El componente principal ( tileGroup ) representa una lista de componentes secundarios mediante el uso de cada conjunto de propiedades en la colección para crear un nuevo componente.

En este momento estoy mapeando individualmente cada propiedad desde el conjunto al componente secundario, pero esto será engorroso si aumenta el conteo de propiedades de un componente y estoy seguro de que hay una manera más simple y más clara de hacerlo ...

¿Cómo puedo pasar el conjunto completo de propiedades al componente secundario sin reasignar cada propiedad?

Código de ejemplo:

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

y luego creación de componentes ...

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

Answer 1

Aparentemente, se está desaprobando transferPropsTo. Con las versiones recientes de React, puede usar atributos de propagación JSX:

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

Más información sobre esto aquí: https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7

Answer 2

En realidad, puedes hacer lo siguiente en tu render

return this.transferPropsTo(<tileSimple />);

Answer 3

Lo que propones hacer,

return <tileSimple allTheProps={tile} />;

funciona bien

Dentro del componente tileSimple , entonces debería poder acceder a las propiedades usando sintaxis como,

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

Answer 4

Para esos casos de uso, lo más fácil es recurrir a la API de JS en lugar de JSX.

return tileSimple(tile);

Para comprender por qué funciona, consulte la versión generada de la versión que desee utilizando la herramienta JSX Compiler ( 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});