从 React 中的另一个文件导入组件

作者

在 React 中从另一个文件导入组件

Import Components from another file in React

在 React 中从另一个文件导入组件：

  1. 从文件导出组件A，例如export function Button() {}。
  2. 将文件中的组件导入B为import {Button} from './another-file'.
  3. 在文件中使用导入的组件B。

下面是从名为another-file.js.

另一个文件.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.

应用程序.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'.

我们在导入时将组件的名称用大括号括起来——这称为命名导入。

导入/导出语法称为
JavaScript 模块。

为了能够从不同的文件导入组件，必须使用命名或默认导出来导出它。

上面的示例使用命名导出和命名导入。

命名和默认导出和导入之间的主要区别是 – 每个文件可以有多个命名导出，但只能有一个默认导出。

Let’s look at an example of how we would import a component that was exported
using a default export.

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

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.

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

// 👇️ default export
export default BigButton;

And here is how we would import the component using a default import.

App.js
// 👇️ default import
import BigButton from './another-file';

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

We could have also used a different name when importing the component, e.g.
Foo.

App.js
// 👇️ default import
import Foo from './another-file';

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

This works, but is confusing and should be avoided.

In my experience, most real world codebases exclusively use named exports and imports because they make it easier to leverage your IDE for autocompletion and auto-imports.
You also don’t have to think about which members are exported with a default or named export.

You can also mix and match, here is an example of a file that uses both – a
default and a named export.

another-file.js
// 👇️ 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>
  );
};

And here is how you would import the two components.

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

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

      <hr />

      <SmallButton />
    </div>
  );
}

We used a default import to import the BigButton component and a named import
to import the SmallButton component.

Note that you can only have a single default export per file, but you can have
as many named exports as necessary.

–