React组织架构树实现求助：图片路径与子元素渲染问题

一、JSON文件中配置图片地址的正确方式 #

分两种场景处理：

• 本地图片（推荐放public文件夹）
  将图片放到项目根目录的public/images文件夹下，JSON中直接写根相对路径即可：

  {
    "name": "Chetan Lal",
    "avatar": "/images/chetan-lal.jpg"
  }
  

  组件里直接用src={item.avatar}，React会自动从public目录加载图片。

• 网络图片
  直接在JSON里填写完整的图片URL：

  {
    "avatar": "https://example.com/avatars/chetan-lal.jpg"
  }
  

注意：如果图片放在src目录（如src/assets），JSON无法直接引用，因为需要webpack编译处理，这种情况建议移到public文件夹更省心。

二、渲染子元素的解决方案（递归组件实现） #

组织架构是树形结构，必须用递归组件才能渲染多层子节点，以下是完整示例：

1. 标准JSON结构（确保包含children字段） #

// orgData.json
{
  "name": "Chetan Lal",
  "avatar": "/images/chetan-lal.jpg",
  "position": "CEO",
  "children": [
    {
      "name": "John Doe",
      "avatar": "/images/john-doe.jpg",
      "position": "CTO",
      "children": []
    },
    {
      "name": "Jane Smith",
      "avatar": "/images/jane-smith.jpg",
      "position": "COO",
      "children": [
        {
          "name": "Mike Brown",
          "avatar": "/images/mike-brown.jpg",
          "position": "Sales Head",
          "children": []
        }
      ]
    }
  ]
}

2. React组件代码（递归渲染） #

import orgData from './orgData.json';

// 递归节点组件，负责渲染单个节点及其子节点
function OrgNode({ node }) {
  return (
    <div className="org-node">
      {/* 节点卡片 */}
      <div className="card">
        <img src={node.avatar} alt={node.name} />
        <h3>{node.name}</h3>
        <p>{node.position}</p>
      </div>

      {/* 渲染子节点：先判断children是否存在且有内容，避免报错 */}
      {node.children?.length > 0 && (
        <div className="children-wrapper">
          {node.children.map((child, idx) => (
            <OrgNode key={idx} node={child} />
          ))}
        </div>
      )}
    </div>
  );
}

// 主组件，入口渲染根节点
function OrgChart() {
  return <OrgNode node={orgData} />;
}

export default OrgChart;

常见问题排查 #

• 确认你的JSON里，所有节点（包括子节点）都包含children字段（空数组也要保留）
• 遍历子节点时必须用map，且给每个子节点添加唯一key
• 一定要先判断children是否存在，用可选链?.或条件判断，避免出现Cannot read property 'map' of undefined错误

内容的提问来源于stack exchange，提问作者sameer