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

我有一个名为tileGroup的组件，它具有属性是其他属性的集合（数组）。

父组件（ tileGroup ）通过使用集合中的每组属性来创build一个新的组件来呈现子组件的列表。

现在我单独将每个属性从集合映射到子组件，但是如果组件的属性数量增加，这将变得很麻烦，我确信有一个更清洁，更简单的方法来做到这一点…

如何将整套属性传递给子组件而不重映射每个属性？

示例代码：

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

然后创build组件

 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

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

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

有关此更多信息： https ： //gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7

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

Answer 3

你实际上可以在你的渲染中做到以下几点

 return this.transferPropsTo(<tileSimple />); 

Answer 4

你提议做什么，

 return <tileSimple allTheProps={tile} />; 

工作得很好。

在tileSimple组件中，您应该可以使用如下语法访问属性：

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