React技巧之匯入元件

chuck發表於2022-06-30
React元件

總覽

在React中，從其他檔案中匯入元件：

  1. 從A檔案中匯出元件。比如說，export function Button() {} 。
  2. 在B檔案中匯入元件。比如說，import {Button} from './another-file' 。
  3. 在B檔案中使用匯入的元件。

命名匯入匯出

下面的例子是從一個名為another-file.js的檔案中匯入元件。

// ?️ named export
export function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// ?️ named export
export const SmallButton = () => {
  return (
    <button onClick={() => console.log('small button')}>Small button</button>
  );
};

下面是我們如何從一個名為App.js檔案中匯入元件。

// ?️ named import
import {BigButton, SmallButton} from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />

      <hr />

      <SmallButton />
    </div>
  );
}

如有必要，請確保當前路徑指向another-file.js模組。上面的例子假設another-file.js和App.js位於相同的目錄下。

舉例來說，如果another-file.js位於上層目錄，你必須這樣匯入：import {BigButton} from '../another-file' 。

在匯入元件時，我們使用大括號包裹元件名稱。這被稱為命名匯入。

import/export語法被稱為JavaScript模組。為了能夠從不同的檔案中匯入一個元件，必須使用命名的或預設的匯出方式將其匯出。上述例子使用了命名匯出和匯入。

命名和預設匯入匯出的主要不同之處在於，在每個檔案中，你可以有多個命名匯出，但只能有一個預設匯出。

預設匯入匯出

讓我們看一個例子，看看我們如何匯入一個使用預設匯出的元件。

// ?️ default export
export default function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

很重要：如果你匯出一個變數（或者箭頭函式）作為預設匯出，你必須先宣告再匯出。你不能在同一行內宣告變數同時預設匯出變數。

const BigButton = () =>  {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// ?️ default export
export default BigButton;

下面是如何使用預設匯入來匯入元件。

// ?️ default import
import BigButton from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />
    </div>
  );
}

當匯入元件時，我們也可以使用不同的名字，比如Foo。

// ?️ default import
import Foo from './another-file';

export default function App() {
  return (
    <div>
      <Foo />
    </div>
  );
}

這樣也會生效，但會令人疑惑，因此應該避免。

根據我的經驗，大多數現實世界的程式碼庫只使用命名的匯出和匯入，因為它們更容易利用你的IDE進行自動完成和自動匯入。 你也不必考慮哪些成員是用預設匯出或命名匯出的。

混合匯入匯出

你也可以混合匹配，下面示例的檔案使用了預設匯出和命名匯出。

// ?️ default export
export default function BigButton() {
  return (
    <button
      style={{padding: '2rem 1rem'}}
      onClick={() => console.log('big button')}
    >
      Big button
    </button>
  );
}

// ?️ named export
export const SmallButton = () => {
  return (
    <button onClick={() => console.log('small button')}>Small button</button>
  );
};

下面是如何匯入這兩個元件。

// ?️ default and named imports
import BigButton, {SmallButton} from './another-file';

export default function App() {
  return (
    <div>
      <BigButton />

      <hr />

      <SmallButton />
    </div>
  );
}

我們使用預設匯入來匯入BigButton元件，使用命名匯入來匯入SmallButton元件。

請注意，每個檔案只能有一個預設匯出，但你可以根據需要有多個命名匯出。

相關文章