React中如何为子节点动态分配不同颜色？问题修复

你当前的代码会导致所有子元素都变成颜色数组的最后一个颜色，原因是每个子节点都会遍历完整的颜色数组，背景色被依次覆盖，最终停留在最后一个颜色。以下是两种可行的解决方案：

方法一：React声明式渲染（推荐） #

直接通过数组映射生成子元素，将颜色数据与视图绑定，无需手动操作DOM：

import { useState } from 'react';

function App() {
  // 定义每个元素的文本和对应颜色
  const itemList = [
    { text: 'one', color: 'green' },
    { text: 'two', color: 'blue' },
    { text: 'three', color: 'green' },
    { text: 'four', color: 'yellow' },
    { text: 'five', color: 'orange' }
  ];

  return (
    <div className="h-96 w-full flex items-center gap-x-6 border border-black">
      {itemList.map((item, idx) => (
        <div
          key={idx}
          className='w-20 h-20 border border-black'
          style={{ backgroundColor: item.color }}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
}

export default App;

方法二：修复DOM操作的写法（适合必须用ref的场景） #

通过forEach的索引参数，将子节点与颜色数组的对应位置绑定，避免重复覆盖：

import { useEffect, useRef } from 'react';

function App() {
  const containerRef = useRef();
  const colors = ['green','blue','green','yellow','orange'];

  useEffect(() => {
    containerRef.current.childNodes.forEach((item, index) => {
      // 确保索引不超出颜色数组范围
      if (index < colors.length) {
        item.style.background = colors[index];
      }
    });
  }, []); // 空依赖确保组件挂载后仅执行一次

  return (
    <div 
      ref={containerRef}
      className="h-96 w-full flex items-center gap-x-6 border border-black"
    >
      <div className='w-20 h-20 border border-black'>one</div>
      <div className='w-20 h-20 border border-black'>two</div>
      <div className='w-20 h-20 border border-black'>three</div>
      <div className='w-20 h-20 border border-black'>four</div>
      <div className='w-20 h-20 border border-black'>five</div>
    </div>
  );
}

export default App;

注意事项 #

• 方法一更符合React数据驱动视图的设计理念，代码更易维护，也避免了直接操作DOM的潜在问题。
• 方法二中要注意子节点数量与颜色数组长度的匹配，避免索引越界。

内容的提问来源于stack exchange，提问作者Saeed Ghezel Arsalan