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

React.js

阿飞伽罗

2020-03-16

我有一个称为的组件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}/>; 
       });

第1656篇《React.js —如何将属性对象传递给子组件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小小Near 2020.03.16

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

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

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

村村神无 2020.03.16

你打算做什么

return <tileSimple allTheProps={tile} />;

效果很好。

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

var vsize = this.props.allTheProps.vsize;
var hsize = this.props.allTheProps.hsize;
Gil前端 2020.03.16

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

return this.transferPropsTo(<tileSimple />);
Near猪猪 2020.03.16

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android