JIYIK CN >

Exporting multiple components in React using named exports like export function A() {}and export function B() {}. The exported components can be imported using named imports like import {A, B} from './another-file'. We can have as many named exports as we need in a single file.

Below is an example of exporting multiple components from a file called Buttons.js .

Buttons.js

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

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

请注意, using on the same line as a function definition exportis the same as exporting the component as an object after declaring it.

Buttons.js

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

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

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

Either of these two approaches can be used when exporting a class component, export class A{}e.g.

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

App.js

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

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

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

For example, if we are importing from one directory up, we can import {SmallButton, BigButton} from '../Buttons'.

We import function components by enclosing their names in curly braces — this is called a named import.

import/exportThe syntax is called ES6 modules in JavaScript.

To be able to import a component from a different file, it must be exported using a named or default export.

The examples above use 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 have only one default export.

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

Buttons.js

// ⛔️ 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;

重要提示: If we export a variable (or arrow function) as default export, we must declare it on the first line and export it on the next line. You cannot declare and default export a variable on the same line.

Having said that, we can use 1 default export and any number of named exports in a single file.

Let's look at an example of exporting multiple components and using both default and named exports.

Buttons.js

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

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

Here is how we will import these two components.

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

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

请注意, we did not enclose the default import in curly braces.

We import the SmallButton component using the default import and the BigButton component using a named import.

请注意, each file can have only one default export, but we can have as many named exports as needed.

In my experience, most real-world codebases use named exports and imports exclusively, as they make it easier to take advantage of IDE auto-completion and auto-import.

We also don't have to think about which members to export using default or named exports.