从 React.js 中的文件导出多个组件

从 React.js 中的文件导出多个组件

Export multiple components from a file in React.js

在 React 中使用命名导出导出多个组件，例如
export function A() {}和export function B() {}. 可以使用命名的 import as 导入导出的组件
import {A, B} from './another-file'。您可以在单个文件中根据需要拥有尽可能多的命名导出。

下面是从一个名为
Buttons.js.

// 👇️ named export
export function SmallButton() {
  return <button>Small</button>;
}

// 👇️ named export
export function BigButton() {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

请注意，export在与函数定义相同的行上使用与在声明组件后将其导出为对象相同。

function SmallButton() {
  return <button>Small</button>;
}

function BigButton() {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

// 👇️ named exports
export {SmallButton, BigButton};

Either of the 2 approaches can be used when exporting class components, e.g.
export class A{}.

Here is how we would import the components in a file called App.js.

// 👇️ named imports
import {SmallButton, BigButton} from './Buttons';

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

Make sure to correct the path that points to the Buttons.js module if you have
to. The example above assumes that Buttons.js and App.js are located in the
same directory.

For example, if you were importing from one directory up, you would do
import {SmallButton, BigButton} from '../Buttons'.

The import/export syntax is called
ES6 Modules
in JavaScript.

The example above uses named exports and named imports.

The main difference between named and default exports and imports is – you can
have multiple named exports per file, but you can only have a single default
export.

If you try to use multiple default exports in a single file, you would get an
error.

// ⛔️ Only one default export allowed per module.
export default function SmallButton() {
  return <button>Small</button>;
}

const BigButton = () => {
  return <button style={{padding: '20px 40px'}}>Big</button>;
}

export default BigButton;

IMPORTANT: If you are exporting a variable (or an arrow function) as a
default export, you have to declare it on 1 line and export it on the next. You
can’t declare and default export a variable on the same line.

Let’s look at an example that exports multiple components and uses both –
default and named exports.

// 👇️ default export
export default function SmallButton() {
  return <button>Small</button>;
}

// 👇️ named export
export const BigButton = () => {
  return <button style={{padding: '20px 40px'}}>Big</button>;
};

And here is how you would import the two components.

// 👇️ default and named imports
import SmallButton, {BigButton} from './Buttons';

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

Notice that we didn’t wrap the default import in curly braces.

我们使用默认导入来导入SmallButton组件，并使用命名导入来导入BigButton组件。

请注意，每个文件只能有一个默认导出，但您可以根据需要拥有任意多个命名导出。

您也不必考虑使用默认导出或命名导出导出哪些成员。