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

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

在 React 中，我们经常需要把一个大组件拆分成多个相关的小组件（比如导航栏组件包含多个导航项组件）。这种 “父组件 + 子组件” 的组合方式能让代码更清晰、更易维护。

本文就来教你：如何定义子组件、如何导出子组件，以及如何在父组件中使用它们。全程用最简单的语言和示例，小白也能轻松学会！

什么是 “父组件” 和 “子组件”？

简单说：

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

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

子组件的导出与使用：3 步走

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

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

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

// components/Menu/index.js import React from 'react'; // 1. 定义父组件：导航栏容器 function Menu({ children }) { // children 是一个特殊属性，用来接收组件标签内的内容 return ( <nav style={{ backgroundColor: '#333', padding: '10px', display: 'flex', gap: '15px' }}> {/* 这里会显示子组件的内容 */} {children} </nav> ); } // 2. 定义子组件：导航项 function Item({ children }) { return ( <a href="#" style={{ color: 'white', textDecoration: 'none', padding: '5px 10px' }} > {children} {/* 接收导航项的文字内容 */} </a> ); } // 3. 关键步骤：把Item作为Menu的属性，关联起来 Menu.Item = Item; // 4. 导出父组件（子组件会跟着父组件一起被导出） export default Menu;

重点说明：

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

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

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

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

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

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

// App.js 完整代码 import React from 'react'; import Menu from './components/Menu'; function App() { return ( <div style={{ padding: '20px' }}> <h1>我的网站</h1> {/* 使用父组件Menu */} <Menu> {/* 用Menu.Item使用子组件，内容写在标签中间 */} <Menu.Item>首页</Menu.Item> <Menu.Item>产品</Menu.Item> <Menu.Item>关于我们</Menu.Item> <Menu.Item>联系客服</Menu.Item> </Menu> </div> ); } export default App;

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

为什么要这样组织组件？

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

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

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

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

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

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

// components/UserCard/index.js import React from 'react'; // 父组件：用户卡片容器 function UserCard({ children }) { return ( <div style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '15px', maxWidth: '300px' }}> {children} </div> ); } // 子组件1：头像 function Avatar({ src, alt }) { return ( <img src={src} alt={alt} style={{ width: '80px', height: '80px', borderRadius: '50%' }} /> ); } // 子组件2：用户信息 function Info({ name, role }) { return ( <div style={{ marginTop: '10px' }}> <h3 style={{ margin: 0 }}>{name}</h3> <p style={{ color: '#666', margin: '5px 0 0 0' }}>{role}</p> </div> ); } // 绑定子组件到父组件 UserCard.Avatar = Avatar; UserCard.Info = Info; // 导出父组件 export default UserCard;

使用时：

// App.js 中使用 import UserCard from './components/UserCard'; function App() { return ( <div style={{ padding: '20px' }}> <UserCard> <UserCard.Avatar src="https://picsum.photos/id/64/200/200" alt="用户头像" /> <UserCard.Info name="张三" role="前端开发工程师" /> </UserCard> </div> ); }

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

总结

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

这种组件组织方式在实际开发中非常常用，很多 UI 库（如 Ant Design、Material-UI）都在用。掌握它，你的 React 代码会更专业、更好维护！

现在就动手试试吧：把上面的示例代码复制到你的项目中，运行看看效果，再尝试修改样式或添加新的子组件，加深理解～

---

以上就是本文的全部内容啦，想了解更多React用法的工友可以关注《React 中文教程》

也可以➕我 green bubble 吹吹水咯

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

本作品采用《CC 协议》，转载必须注明作者和本文链接