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}/>;
});
68510 次浏览

对于这些用例,最简单的方法是回退到 JSAPI 而不是 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});

你打算做什么,

return <tileSimple allTheProps={tile} />;

没问题。

tileSimple组件中,您应该能够使用以下语法访问属性,

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

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

return this.transferPropsTo(<tileSimple />);

显然,转移 PropsTo 是不被推荐的。使用最新版本的 React,你可以使用 JSX 传播属性:

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

更多信息请点击: 不推荐转让提议