我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
我试图在React JSX(其中ObjectRow是一个单独的组件)中执行以下操作:
<tbody>
for (var i=0; i < numrows; i++) {
<ObjectRow/>
}
</tbody>
我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用。然而,由于来自模板领域,而且是JSX的新手,我不确定如何实现上述目标(多次添加组件)。
当前回答
您可以直接在JSX中执行相同的操作,使用map而不是for of循环:
render: function() {
const items = ['one', 'two', 'three'];
return (
<ul>
{items.map((value, index) => {
return <li key={index}>{value}</li>
})}
</ul>
)
}
其他回答
假设您所在的州有一系列项目:
[{name: "item1", id: 1}, {name: "item2", id: 2}, {name: "item3", id: 3}]
<tbody>
{this.state.items.map((item) => {
<ObjectRow key={item.id} name={item.name} />
})}
</tbody>
如果您已经在使用lodash,_.times函数很方便。
import React, { Component } from "react";
import Select from "./Select";
import _ from "lodash";
export default class App extends Component {
render() {
return (
<div className="container">
<ol>
{_.times(3, (i) => (
<li key={i}>repeated 3 times</li>
))}
</ol>
</div>
);
}
}
随着时间的推移,语言越来越成熟,我们经常会遇到这样的常见问题。问题是循环组件“n”次。
{[...new Array(n)].map((item, index) => <MyComponent key={index} />)}
其中,n-是要循环的次数。项将未定义,索引将照常。此外,ESLint不鼓励使用数组索引作为键。
但是,您的优点是不需要在之前初始化数组,最重要的是避免了for循环。。。
为了避免项目未定义带来的不便,您可以使用_,这样在进行linting时就会忽略它,并且不会引发任何linting错误,例如
{[...new Array(n)].map((_, index) => <MyComponent key={index} />)}
如果选择在render方法的return()内部转换此值,最简单的方法就是使用map()方法。使用Map()函数将数组映射到JSX语法,如下所示(使用ES6语法)。
在父组件内部:
<tbody>
{ objectArray.map(object => <ObjectRow key={object.id} object={object.value} />) }
</tbody>
请注意,key属性已添加到子组件中。如果没有提供密钥属性,您可以在控制台上看到以下警告。
警告:数组或迭代器中的每个子级都应该具有独特的“钥匙”道具。
注意:人们经常犯的一个错误是在迭代时使用索引作为关键字。使用元素的索引作为键是一种反模式,您可以在这里阅读有关它的更多信息。简而言之,如果它不是一个静态列表,就不要使用索引作为键。
现在,在ObjectRow组件中,可以从对象的财产访问该对象。
在ObjectRow组件内部
const { object } = this.props
Or
const object = this.props.object
这将获取从父组件传递到ObjectRow组件中的变量对象的对象。现在,您可以根据您的目的吐出该对象中的值。
参考文献:
JavaScript中的map()方法
ECMAScript 6或ES6
在React中使用map是迭代数组的最佳实践。
为了防止ES6出现一些错误,React中使用了如下语法映射:
<tbody>
{items.map((item, index) => <ObjectRow key={index} name={item.name} />)}
</tbody>
在这里,您调用一个组件<ObjectRow/>,因此不需要在箭头后面加括号。
但你也可以这样做:
{items.map((item, index) => (
<ObjectRow key={index} name={item.name} />
))}
Or:
{items.map((item, index) => {
// Here you can log 'item'
return (
<ObjectRow key={index} name={item.name} />
)
})}
我这么说是因为如果在箭头后面加上括号“{}”,React将不会抛出错误,并显示白名单。