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 条评论
登录 后参与评论

相关文章

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

React JS:如何将值传递给其他组件onSubmit

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

如何将组件对象传递给React.js中的容器?

如何将包含道具的对象传递给React组件?

如何将Express响应对象传递给前端JS对象

React.js如何将索引作为prop从this.props数组传递给子组件

如何将对象作为道具传递给React.js中的子功能组件?

从JS对象传递组件作为React中的道具

如何在React JS中将对象传递给处理程序?

React.js-如何将数组传递给函数?

如何将函数传递给React.js中的变量组件?

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

如何将React Hook传递给子组件

React js将props传递给组件

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

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

如何将对象传递给react-redux

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

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

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

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

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

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

如何将 HTML 属性传递给 React 中的子组件?

React JS 将数据或子组件传递给父组件

如何将接口和其他类型的对象传递给 React 中的功能组件?

在 React js 如何将输入值传递给当前组件中的 API 参数

如何将useState变量值传递给INSERT数据react.js和mysql的对象字段数组?