React.js - Как передать свойства объекта дочернему компоненту?

У меня есть компонент под названием tileGroup, который имеет свойство, которое является набором (массивом) других свойств.

Родительский компонент (tileGroup) отображает список дочерних компонентов, используя каждый набор свойств в коллекции для создания нового компонента.

В настоящее время я индивидуально сопоставляю каждое свойство из набора с дочерним компонентом, но это станет громоздким, если количество объектов для компонента увеличивается, и я уверен, что есть более простой и простой способ сделать это...

Как передать полный набор свойств дочернему компоненту без переназначения каждого свойства?

Пример кода:

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

а затем создание компонента.

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

Ответы

Ответ 1

По-видимому, TransferPropsTo является устаревшим. В последних версиях React вы можете использовать атрибуты распространения JSX:

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

Подробнее об этом здесь: Устаревшая передачаPropsTo

Ответ 2

Для тех случаев использования проще всего отказаться от JS API вместо JSX.

return tileSimple(tile);

Чтобы понять, почему это работает, посмотрите на сгенерированную версию версии, которую вы хотите, используя инструмент компилятора 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});

Ответ 3

Фактически вы можете просто сделать следующее в рендеринге

return this.transferPropsTo(<tileSimple />);

Ответ 4

Что вы предлагаете делать,

return <tileSimple allTheProps={tile} />;

отлично работает.

Внутри компонента tileSimple вы должны иметь доступ к свойствам с помощью синтаксиса типа

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