我有一个名为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}/>;
});
发布于 2014-11-11 15:50:16
显然,transferPropsTo正在被弃用。在React的最新版本中,您可以使用JSX传播属性:
return <tileSimple {...tile} />;
更多信息请点击此处:Deprecating transferPropsTo
发布于 2014-01-04 06:12:11
对于这些用例,最简单的方法是回退到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});
发布于 2014-05-27 09:49:04
实际上,您可以在渲染中执行以下操作
return this.transferPropsTo(<tileSimple />);
https://stackoverflow.com/questions/20913288
复制相似问题