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


72

我有一个称为的组件tileGroup,该组件的属性是其他属性的集合(数组)。

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

Answers:


128

显然不建议使用transferPropsTo。在最新版本的React中,您可以使用JSX传播属性:

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

有关此的更多信息:弃用transferPropsTo


1
我喜欢,很好的答案。
Jakub Krol

真是的,这真是个骇客。感谢分享。
Oo -_- oO

32

对于这些用例,最简单的方法是回退到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); 工作?道具应该是不变的,所以我怀疑简单的对象引用就足够了。
杰森·赖斯

1
在React 13+上,您可以使用React.createFactory(tileSimple)(tile);。参见fb.me/react-legacyfactory
布赖恩

如果必须在skey数组上定义一个while映射,则这将不起作用titleSimple
avalanche1


0

你打算做什么

return <tileSimple allTheProps={tile} />;

效果很好。

tileSimple然后,您应该可以在组件内使用以下语法访问属性:

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

1
该解决方案的问题在于,我将不得不遍历一组“包装”属性,以使几个节点下降。解决方案@Vjeux可以工作!
马特·福克斯

@MattFoxxDun我可以同意@Vjeux解决方案更优雅,但是,我不明白您对包装属性的不断增加的意思吗?如果您将allTheProps传递给子组件,则仍将以相同的方式(即this.props.childAllTheProps.vsize)进行访问。我想念什么?
lostriebo 2014年

1
我所设想的组件结构需要编写独立的组件(这是React的哲学),但是要由它们所属的父组件(如果有)构建它们。在我拥有Page Master-> Section-> Tile Group-> Tile(Type)-> Tile Content->其他情况下,该链中可能有5个以上的包装器。因此,这不是必须要遍历的合理对象 this.FirstChildPropsWrapper.SecondChildPropsWrapper.ThirdChildPropsWRapper.FourthChildPropsWrapper.etc
Matt Foxx Duncan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.