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

马特·福克斯(Matt Foxx)邓肯(Duncan)

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React.js如何将回调传递给子组件?

来自分类Dev

如何将全局变量传递给所有组件 - react js

来自分类Dev

将 JS 对象传递给组件 Vue.js

来自分类Dev

如何将React Hook传递给子组件

来自分类Dev

如何将道具传递给子React组件?

来自分类Dev

如何将函数作为属性传递给React组件?

来自分类Dev

如何将属性传递给 React 函数组件?

来自分类Dev

React js将props传递给组件

来自分类Dev

如何将组件作为道具传递给 react js 中的另一个组件?

来自分类Dev

如何将参数传递给React js中的函数?

来自分类Dev

React.js-如何将道具传递给Route?

来自分类Dev

如何将对象传递给react-redux

来自分类Dev

如何将普通对象传递给 CASL (React) 的权限

来自分类Dev

如何将事件对象传递给 React 事件处理函数?

来自分类Dev

如何将JSON对象传递给Node JS服务器

来自分类Dev

如何将组件名称从另一个组件的对象传递到React Router Dom中的Route?

来自分类Dev

使用React Jest酶-如何使用Shallow将构造函数对象传递给我的组件?

来自分类Dev

在使用useReducer时如何在React js中进行优化,循环传递给子组件的状态

来自分类Dev

全局JS变量将HTML块传递给React组件

来自分类Dev

将URL参数传递给React.js根组件

来自分类Dev

React.js将方法作为道具传递给子对象

来自分类Dev

React:将函数属性传递给纯子组件-渲染

来自分类Dev

如何将 express.js 响应对象传递给另一个模块

来自分类Dev

如何将对象的属性作为prop传递给vue.js组件

来自分类Dev

React-router:如何将props传递给子组件?

来自分类Dev

将 vanilla JS 对象作为道具传递给子组件

来自分类Dev

如何将JS Progressbar.js对象重写为React组件

来自分类Dev

Ember.js:如何将组件属性传递给jQuery回调?

来自分类Dev

Ember.js:如何将组件属性传递给jQuery回调?

Related 相关文章

  1. 1

    React.js如何将回调传递给子组件?

  2. 2

    如何将全局变量传递给所有组件 - react js

  3. 3

    将 JS 对象传递给组件 Vue.js

  4. 4

    如何将React Hook传递给子组件

  5. 5

    如何将道具传递给子React组件?

  6. 6

    如何将函数作为属性传递给React组件?

  7. 7

    如何将属性传递给 React 函数组件?

  8. 8

    React js将props传递给组件

  9. 9

    如何将组件作为道具传递给 react js 中的另一个组件?

  10. 10

    如何将参数传递给React js中的函数?

  11. 11

    React.js-如何将道具传递给Route?

  12. 12

    如何将对象传递给react-redux

  13. 13

    如何将普通对象传递给 CASL (React) 的权限

  14. 14

    如何将事件对象传递给 React 事件处理函数?

  15. 15

    如何将JSON对象传递给Node JS服务器

  16. 16

    如何将组件名称从另一个组件的对象传递到React Router Dom中的Route?

  17. 17

    使用React Jest酶-如何使用Shallow将构造函数对象传递给我的组件?

  18. 18

    在使用useReducer时如何在React js中进行优化,循环传递给子组件的状态

  19. 19

    全局JS变量将HTML块传递给React组件

  20. 20

    将URL参数传递给React.js根组件

  21. 21

    React.js将方法作为道具传递给子对象

  22. 22

    React:将函数属性传递给纯子组件-渲染

  23. 23

    如何将 express.js 响应对象传递给另一个模块

  24. 24

    如何将对象的属性作为prop传递给vue.js组件

  25. 25

    React-router:如何将props传递给子组件?

  26. 26

    将 vanilla JS 对象作为道具传递给子组件

  27. 27

    如何将JS Progressbar.js对象重写为React组件

  28. 28

    Ember.js:如何将组件属性传递给jQuery回调?

  29. 29

    Ember.js:如何将组件属性传递给jQuery回调?

热门标签

归档