我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文就描述一个rect项目中，变量遍历输出子组件的问题。变量可以是状态值或者props值，或者直接的一个变量。本文以演示循环为主要目的。

苏南大叔：react教程，如何通过map方法循环输出子组件？ - 循环输出子组件
react教程，如何通过map方法循环输出子组件？（图4-1）

大家好，苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述react项目中，循环输出子对象的方法。当然，对于纯正的js环境，也是有参考意义的。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

情况一：循环普通数组

测试代码：

render() {
  const items = ["苏南大叔", "sunan大叔", "sunan"];
  // const items = ["id2":"苏南大叔", "id1":"sunan大叔", "id0":"sunan"];
  var result = [];
  for (var i = 0; i < items.length; i++) {
    result.push(<div key={i}>{items[i]}</div>)
  }
  return (
    <div>
      {items.map(item => (
        <div key={item}>{item}</div>
      ))}
      {items.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      {result}
    </div>
  );
}
JavaScript

苏南大叔：react教程，如何通过map方法循环输出子组件？ - 第一种情况
react教程，如何通过map方法循环输出子组件？（图4-2）

情况二：循环以对象为元素的数组

render() {
  const items2 = [
    { id: 2, name: '苏南大叔' },
    { id: 1, name: 'sunan大叔' },
    { id: 0, name: 'sunan' }
  ];
  return (
    <div>
      {items2.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
    </div>
  );
}
JavaScript

苏南大叔：react教程，如何通过map方法循环输出子组件？ - 第二种情况
react教程，如何通过map方法循环输出子组件？（图4-3）

情况三：循环对象object

render() {
  const items3 = {
    "id2": "苏南大叔",
    "id1": "sunan大叔",
    "id0": "sunan",
  }
  var result3 = [];
  for (const key in items3) {
    result3.push(<div key={key}>{items3[key]}</div>)
  }
  return (
    <div>
      {result3}
    </div>
  );
}
JavaScript

苏南大叔：react教程，如何通过map方法循环输出子组件？ - 第三种情况
react教程，如何通过map方法循环输出子组件？（图4-4）

最终完整代码

import React, { Component } from 'react'
class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const items = ["苏南大叔", "sunan大叔", "sunan"];
    const items2 = [
      { id: 2, name: '苏南大叔' },
      { id: 1, name: 'sunan大叔' },
      { id: 0, name: 'sunan' }
    ];
    const items3 = {
      "id2": "苏南大叔",
      "id1": "sunan大叔",
      "id0": "sunan",
    }
    var result = [];
    for (var i = 0; i < items.length; i++) {
      result.push(<div key={i}>{items[i]}</div>)
    }
    var result3 = [];
    for (const key in items3) {
      result3.push(<div key={key}>{items3[key]}</div>)
    }
    return (
      <div>
        {items.map(id => (
          <div key={id}>{id}</div>
        ))}
        {items.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
        {result}
        {items2.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
        {result3}
      </div>
    );
  }
}
export default Child;
JavaScript

这里最应该注意的就是，一定要输出key={}，而且{}内部要保证这个值的唯一性。

相关链接

结束语

更多react经验文章，请点击苏南大叔的博客文章：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react