『React』子組件的導出與使用：小白也能懂的組件組織方式

點贊 + 關注 + 收藏 = 學會了

在 React 中，我們經(jīng)常需要把一個大組件拆分成多個相關的小組件（比如導航欄組件包含多個導航項組件）。這種 “父組件 + 子組件” 的組合方式能讓代碼更清晰、更易維護。

本文就來教你：如何定義子組件、如何導出子組件，以及如何在父組件中使用它們。全程用最簡單的語言和示例，小白也能輕松學會！

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

簡單說：

父組件：可以理解為 “容器”，負責整體結(jié)構(gòu)。
子組件：是父組件內(nèi)部的 “零件”，負責具體功能。

比如一個導航欄（Menu）是父組件，里面的每個導航項（Item）就是子組件。它們是 “整體與部分” 的關系，通常一起出現(xiàn)、一起使用。

子組件的導出與使用：3 步走

我以 “導航菜單” 為例，一步步實現(xiàn)父組件包含子組件的完整流程。

第一步：創(chuàng)建組件文件，定義父組件和子組件

首先在項目中新建一個組件文件夾（通常叫components），再創(chuàng)建一個Menu文件夾，里面放index.js文件（約定俗成的命名方式）。

// components/Menu/index.js
import React from 'react';

// 1. 定義父組件：導航欄容器
function Menu({ children }) {
  // children 是一個特殊屬性，用來接收組件標簽內(nèi)的內(nèi)容
  return (
    <nav style={{ 
      backgroundColor: '#333', 
      padding: '10px', 
      display: 'flex', 
      gap: '15px' 
    }}>
      {/* 這里會顯示子組件的內(nèi)容 */}
      {children}
    </nav>
  );
}

// 2. 定義子組件：導航項
function Item({ children }) {
  return (
    <a 
      href="#" 
      style={{ 
        color: 'white', 
        textDecoration: 'none', 
        padding: '5px 10px' 
      }}
    >
      {children} {/* 接收導航項的文字內(nèi)容 */}
    </a>
  );
}

// 3. 關鍵步驟：把Item作為Menu的屬性，關聯(lián)起來
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>我的網(wǎng)站</h1>
      
      {/* 使用父組件Menu */}
      <Menu>
        {/* 用Menu.Item使用子組件，內(nèi)容寫在標簽中間 */}
        <Menu.Item>首頁</Menu.Item>
        <Menu.Item>產(chǎn)品</Menu.Item>
        <Menu.Item>關于我們</Menu.Item>
        <Menu.Item>聯(lián)系客服</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 個明顯好處：

關系更清晰：看到Menu.Item就知道這是 Menu 的子組件，不是其他組件。
避免命名沖突：如果有多個組件都有Item子組件（比如Menu.Item、List.Item），不會混淆。
符合直覺：就像 “電腦。鍵盤”“手機。屏幕” 一樣，子組件是父組件的一部分，使用起來更自然。

再舉一個例子：用戶信息組件

為了加深理解，我們再做一個 “用戶信息” 組件：父組件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="前端開發(fā)工程師" 
        />
      </UserCard>
    </div>
  );
}

這樣就實現(xiàn)了一個包含頭像和信息的用戶卡片，結(jié)構(gòu)清晰，使用方便。

總結(jié)

子組件定義：在父組件同一個文件中定義相關的子組件。
綁定子組件：通過父組件.子組件 = 子組件的方式關聯(lián)（如Menu.Item = Item）。
導出與導入：只需要導出父組件，導入后通過父組件.子組件使用。
核心優(yōu)勢：關系清晰、避免沖突、使用直觀。

這種組件組織方式在實際開發(fā)中非常常用，很多 UI 庫（如 Ant Design、Material-UI）都在用。掌握它，你的 React 代碼會更專業(yè)、更好維護！

現(xiàn)在就動手試試吧：把上面的示例代碼復制到你的項目中，運行看看效果，再嘗試修改樣式或添加新的子組件，加深理解～

以上就是本文的全部內(nèi)容啦，想了解更多React用法的工友可以關注《React 中文教程》

也可以?我 green bubble 吹吹水咯