React循环数组/对象在jsx中的渲染教程与实例

在这个简短的教程中，你将学习如何在jsx render函数中迭代一个数组或对象。

在反应组件中，Render方法返回单个元素渲染到页面。

有时，我们想用for循环来显示子组件。我们可以在render jsx中使用循环，但要迭代和显示子组件是很困难的。

这篇文章解释了雇员数组数据存储在反应状态中，使用反应道具在子组件中显示这些数据，并在父组件中进行迭代。

让我们在react中创建EmployeeComponent.js。

这个组件从react props中读取对象，并用ul/li元素显示在页面上。收到的数据是一个对象，使用 es6对象销毁语法转换为单个字段。

import React, { Component } from 'react';
import "../index.css"
export default class EmployeeComponent extends Component {
    render() {
        const { id, name, salary } = this.props.data;
        return <div>
                <li>Id:{id}</li>
                <li>Name:{name}</li>
                <li>Salary:{salary}</li>
        </div>
在父组件中，雇员列表在React rdx中使用不同的语法进行迭代。
在React jsx内部迭代数组循环
反应状态对象被初始化为雇员数据的数组。
在渲染方法中，以下是一系列的步骤
使用基本的for循环语法来迭代数组，你可以查看更多关于for循环的信息
构建一个带有数据的雇员组件子数组
请注意，每个子组件都有一个唯一的关键属性，如果你不传递这个属性，你会得到一个错误，比如一个列表中的每个子组件都应该有一个唯一的 "关键 "道具。
最后，组件阵列被放置在div元素内。
下面是完整的示例代码。
import React, { Component } from 'react';
import EmployeeComponent from './EmployeeComponent';
import TextControl from './TextControl';
export default class EmployeeListComponent extends Component {
    constructor() {
        super();
        this.state = {
            employees: [
                    "id": "1",
                    "name": "Franc",
                    "salary": "5000"
                    "id": "11",
                    "name": "John",
                    "salary": "6000",
    render() {
        let list = [];
        for (var i = 0; i < this.state.employees.length; i++) {
            list.push(<EmployeeComponent key={i} data={this.state.employees[i]} ></EmployeeComponent >);
        return <div>{list}</div>;
你也可以使用react jsx中的map方法重写上述内容
map是JavaScript中数组的内置函数，map遍历数组中的每个元素并返回新的数组。这些方法在迭代过程中对每个元素都有一个回调的调用。它使用es6箭头函数进行回调。
与map，代码如下
render() {
        let list = [];
        this.state.employees.map((employee, index) => {
            list.push();
        return {list};
另一种方法是使用for-of语法重写 ，在react中进行迭代和渲染。
for-of循环是迭代对象的新方法。
render() {
        var list = [];
        for (const [index, employee] of this.state.employees.entries()) {
            list.push();
        return {list};
除了上述方法之外，你还可以用不同的方法在javascript中进行迭代。
由于react render只返回一个元素，所以在返回列表之前，使用上面提到的不同方法构建列表，并返回最终的数组。