『React』子组件的导出与使用：小白也能懂的组件组织方式

点赞 + 关注 + 收藏 = 学会了
在 React 中，我们经常需要把一个大组件拆分成多个相关的小组件（比如导航栏组件包含多个导航项组件）。这种 “父组件 + 子组件” 的组合方式能让代码更清晰、更易维护。
本文就来教你：如何定义子组件、如何导出子组件，以及如何在父组件中使用它们。全程用最简单的语言和示例，小白也能轻松学会！
什么是 “父组件” 和 “子组件”？

简单说：

• 父组件：可以理解为 “容器”，负责整体结构。
  
• 子组件：是父组件内部的 “零件”，负责具体功能。
  

比如一个导航栏（Menu）是父组件，里面的每个导航项（Item）就是子组件。它们是 “整体与部分” 的关系，通常一起出现、一起使用。
子组件的导出与使用：3 步走

我以 “导航菜单” 为例，一步步实现父组件包含子组件的完整流程。

第一步：创建组件文件，定义父组件和子组件

首先在项目中新建一个组件文件夹（通常叫components），再创建一个Menu文件夹，里面放index.js文件（约定俗成的命名方式）。

1. // components/Menu/index.js
2. import React from 'react';
4. // 1. 定义父组件：导航栏容器
5. function Menu({ children }) {
6.   // children 是一个特殊属性，用来接收组件标签内的内容
7.   return (
8.     <nav style={{
9.       backgroundColor: '#333',
10.       padding: '10px',
11.       display: 'flex',
12.       gap: '15px'
13.     }}>
14.       {/* 这里会显示子组件的内容 */}
15.       {children}
16.     </nav>
17.   );
18. }
20. // 2. 定义子组件：导航项
21. function Item({ children }) {
22.   return (
23.    
24.       {children} {/* 接收导航项的文字内容 */}
25.    
26.   );
27. }
29. // 3. 关键步骤：把Item作为Menu的属性，关联起来
30. Menu.Item = Item;
32. // 4. 导出父组件（子组件会跟着父组件一起被导出）
33. export default Menu;

复制代码

重点说明：

• Menu.Item = Item 这行代码是 “绑定” 子组件到父组件的关键，让子组件成为父组件的一个属性。
  
• 这样做的好处是：使用时能清晰看出 “Item 是 Menu 的一部分”，避免命名混乱。
  

第二步：在页面中导入父组件

接下来在主页面（比如App.js）中导入刚才定义的Menu组件（子组件会跟着一起被导入）。

1. // App.js
2. import React from 'react';
3. // 只需要导入父组件即可，子组件会作为其属性存在
4. import Menu from './components/Menu';

复制代码

第三步：使用父组件和子组件

导入后，就可以像这样使用子组件：父组件.子组件（比如Menu.Item）。

1. // App.js 完整代码
2. import React from 'react';
3. import Menu from './components/Menu';
5. function App() {
6.   return (
7.    
8.       <h1>我的网站</h1>
9.       
10.       {/* 使用父组件Menu */}
11.       <Menu>
12.         {/* 用Menu.Item使用子组件，内容写在标签中间 */}
13.         <Menu.Item>首页</Menu.Item>
14.         <Menu.Item>产品</Menu.Item>
15.         <Menu.Item>关于我们</Menu.Item>
16.         <Menu.Item>联系客服</Menu.Item>
17.       </Menu>
18.    
19.   );
20. }
22. export default App;

复制代码

页面会显示一个黑色导航栏，里面有 4 个白色的导航链接，这就是父组件Menu包含 4 个子组件Menu.Item的效果。就是前面截图的样子了。
为什么要这样组织组件？

可能你会问：直接单独导出子组件不行吗？比如：

1. // 另一种方式：单独导出子组件
2. export function Menu() { ... }
3. export function Item() { ... }
5. // 使用时单独导入
6. import { Menu, Item } from './components/Menu';

复制代码

这种方式当然可以，但用父组件.子组件的方式有 3 个明显好处：

• 关系更清晰：看到Menu.Item就知道这是 Menu 的子组件，不是其他组件。
  
• 避免命名冲突：如果有多个组件都有Item子组件（比如Menu.Item、List.Item），不会混淆。
  
• 符合直觉：就像 “电脑。键盘”“手机。屏幕” 一样，子组件是父组件的一部分，使用起来更自然。
  

再举一个例子：用户信息组件

为了加深理解，我们再做一个 “用户信息” 组件：父组件UserCard（用户卡片）包含子组件UserCard.Avatar（头像）和UserCard.Info（信息）。

1. // components/UserCard/index.js
2. import React from 'react';
4. // 父组件：用户卡片容器
5. function UserCard({ children }) {
6.   return (
7.    
8.       {children}
9.    
10.   );
11. }
13. // 子组件1：头像
14. function Avatar({ src, alt }) {
15.   return (
16.     <img
17.       src={src}
18.       alt={alt}
19.       style={{
20.         width: '80px',
21.         height: '80px',
22.         borderRadius: '50%'
23.       }}
24.     />
25.   );
26. }
28. // 子组件2：用户信息
29. function Info({ name, role }) {
30.   return (
31.    
32.       <h3 style={{ margin: 0 }}>{name}</h3>
33.       <p style={{ color: '#666', margin: '5px 0 0 0' }}>{role}</p>
34.    
35.   );
36. }
38. // 绑定子组件到父组件
39. UserCard.Avatar = Avatar;
40. UserCard.Info = Info;
42. // 导出父组件
43. export default UserCard;

复制代码

使用时：

1. // App.js 中使用
2. import UserCard from './components/UserCard';
4. function App() {
5.   return (
6.    
7.       <UserCard>
8.         <UserCard.Avatar
9.           src="https://picsum.photos/id/64/200/200"
10.           alt="用户头像"
11.         />
12.         <UserCard.Info
13.           name="张三"
14.           role="前端开发工程师"
15.         />
16.       </UserCard>
17.    
18.   );
19. }

复制代码

这样就实现了一个包含头像和信息的用户卡片，结构清晰，使用方便。
总结

• 子组件定义：在父组件同一个文件中定义相关的子组件。
  
• 绑定子组件：通过父组件.子组件 = 子组件的方式关联（如Menu.Item = Item）。
  
• 导出与导入：只需要导出父组件，导入后通过父组件.子组件使用。
  
• 核心优势：关系清晰、避免冲突、使用直观。
  

这种组件组织方式在实际开发中非常常用，很多 UI 库（如 Ant Design、Material-UI）都在用。掌握它，你的 React 代码会更专业、更好维护！
现在就动手试试吧：把上面的示例代码复制到你的项目中，运行看看效果，再尝试修改样式或添加新的子组件，加深理解～
以上就是本文的全部内容啦，想了解更多React用法的工友可以关注《React 中文教程》
也可以➕我 green bubble 吹吹水咯

点赞 + 关注 + 收藏 = 学会了

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！