react class组件 foreach循环执行多次

Question

请问 react的class组件如何循环一个数组并且和左边的相对应上面中文下面英文

我写出来成这个样子了 每次循环遍历是一整个数组

求指教谢谢

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  在循环数组的时候，可以使用map方法进行遍历，在每次遍历时拆分中英文，并将它们对应放在一起。具体操作步骤如下：

  1. 从父组件传入一个数组。
  2. 在子组件中使用map方法遍历数组，得到中英文拆分后的内容，将它们对应放在一起，并显示出来。
  3. 在父组件中将循环输出的子组件渲染出来。

  下面是示例代码：

  // 父组件传入的数组
  const array = [
    "你好", "hello",
    "再见", "goodbye",
    "谢谢", "thank you"
  ];
  
  // 子组件
  const ArrayItem = ({ chinese, english }) => (
    <div>
      <span>{chinese}</span>
      <span>{english}</span>
    </div>
  );
  
  // 父组件
  const ArrayComponent = ({ array }) => (
    <div>
      {array.map((item, index) => (
        <ArrayItem
          key={index}
          chinese={item[index * 2]}
          english={item[index * 2 + 1]}
        />
      ))}
    </div>
  );
  

  在这个示例代码中，我们先定义一个父组件，将一个数组作为props传入子组件。我们在子组件数组中进行循环遍历，在每次遍历时，使用map方法获取数组中当前项的中文和英文，并将它们分别放入子组件的两个span标签中。最后在父组件中，将子组件循环输出即可。

  如果你有更复杂的需求，可以对ArrayItem组件进行优化，使其可以接收多个属性，以便扩展和复用。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^