React.js - 如何将属性对象传递给子组件？答案

【问题标题】：React.js -- How to pass properties object to child component?React.js - 如何将属性对象传递给子组件？
【发布时间】：2014-01-03 21:48:42
【问题描述】：

我有一个名为 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}/>; 
       });

【问题讨论】：

标签： javascript properties parent-child reactjs

【解决方案1】：

显然 transferPropsTo 已被弃用。使用最新版本的 React，您可以使用 JSX 传播属性：

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

在此处了解更多信息：Deprecating transferPropsTo

【讨论】：

我喜欢它，很好的答案。
天啊，这简直是天方夜谭。感谢分享。

【解决方案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});

【讨论】：

感谢实时编辑器正是我所需要的！这非常有效。
不会只是 tileSimple(tile);工作？道具应该是不可变的，所以我怀疑一个简单的对象引用就足够了。
在 React 13+ 上，你会使用 React.createFactory(tileSimple)(tile);。见fb.me/react-legacyfactory。
如果在映射titleSimples 数组时必须定义key，这将不起作用

【解决方案3】：

您实际上可以在渲染中执行以下操作

return this.transferPropsTo(<tileSimple />);

【讨论】：

【解决方案4】：

你建议做什么，

return <tileSimple allTheProps={tile} />;

工作得很好。

在tileSimple 组件中，您应该能够使用如下语法访问属性，

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

【讨论】：

该解决方案的问题是我将拥有一组不断增加的“包装器”属性，我必须遍历这些属性才能减少几个节点。 @Vjeux 的解决方案虽然有效！
@MattFoxxDuncan 我同意@Vjeux 解决方案更优雅，但是，我不明白你所说的不断增加的包装器属性是什么意思？如果您将 allTheProps 传递给子组件，您仍然可以以相同的方式访问它（即this.props.childAllTheProps.vsize）。我错过了什么？
我设想的组件结构需要编写独立的组件（正如 React 的哲学），但它们由它们所属的父组件（如果有的话）构建。在我有 Page Master -> Section -> Tile Group -> Tile(Type) -> Tile Content -> 其他东西的情况下——该链中可能有 5 个以上的包装器。那么，这不是一个合理的对象，必须遍历 this.FirstChildPropsWrapper.SecondChildPropsWrapper.ThirdChildPropsWRapper.FourthChildPropsWrapper.etc