React JS中如何通过props传递App.js导入的data.json数据到组件

你要的「App.js统一导入JSON后通过props向下传递」是React单向数据流最标准的写法之一，比各个组件各自导入JSON的可维护性高很多，具体实现如下，所有代码在Vite、Create React App搭建的默认React项目里都可以直接运行：

1. 准备测试JSON文件 #

把你的data.json放在src目录根路径即可，这里给一个示例结构参考：

// src/data.json
{
  "siteInfo": {
    "title": "React练习站点",
    "version": "1.0.0"
  },
  "userList": [
    {"id": 1, "name": "张三", "role": "管理员"},
    {"id": 2, "name": "李四", "role": "普通用户"}
  ],
  "postList": [
    {"id": 1, "title": "React入门第一步", "content": "掌握props传递逻辑"},
    {"id": 2, "title": "静态数据管理", "content": "统一入口导入更易维护"}
  ]
}

注：React官方脚手架默认支持JSON文件导入，不需要额外配置loader。

2. App.js统一导入并传递props #

在根组件App里一次性导入JSON数据，再按照业务组件需要的数据字段，通过props分别向下传递：

// src/App.js
// 统一导入静态JSON数据
import siteData from './data.json';
// 导入业务组件
import Header from './components/Header';
import UserList from './components/UserList';
import PostList from './components/PostList';

function App() {
  return (
    <div className="app-container">
      {/* 按组件需要拆分传递对应数据 */}
      <Header siteInfo={siteData.siteInfo} />
      <UserList users={siteData.userList} />
      <PostList posts={siteData.postList} />
    </div>
  );
}

export default App;

3. 业务组件通过props接收数据使用 #

所有业务组件不需要单独导入data.json，直接从入参的props里取对应数据渲染即可：

// src/components/Header.jsx
export default function Header(props) {
  const { siteInfo } = props;
  return (
    <header className="site-header">
      <h1>{siteInfo.title}</h1>
      <span>当前版本：{siteInfo.version}</span>
    </header>
  )
}

// src/components/UserList.jsx
export default function UserList(props) {
  const { users } = props;
  return (
    <section className="user-section">
      <h2>用户列表</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.role}</li>
        ))}
      </ul>
    </section>
  )
}

// src/components/PostList.jsx
export default function PostList(props) {
  const { posts } = props;
  return (
    <section className="post-section">
      <h2>文章列表</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </section>
  )
}

补充说明 #

网上很多教程直接在组件内导入JSON的写法，只适合完全固定、不会变更的常量场景。你选的统一入口导入+props传递的写法，后续如果要把静态JSON换成接口请求数据，只需要修改App.js里的数据获取逻辑，所有子组件不需要做任何改动，维护成本低很多，也更方便做组件单元测试。

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