在 React 中导入组件时使用导入别名

Using import aliases when importing Components in React

要在 React 中导入组件时使用导入别名，请使用as关键字重命名导入的组件。

关键字as允许我们更改导入的标识名称。

下面是一个文件示例，App.js该文件导入了一个名为
Button.

应用程序.js


// 👇️ rename import to MyButton
import {Button as MyButton} from './another-file';

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

以下是的内容another-file.js。

另一个文件.js


export function Button() {
  return <button onClick={() => console.log('button clicked')}>Click</button>;
}

文件中的导入路径App.js假定another-file.js位于同一目录中。

例如，如果从一个目录向上导入，则必须从. '../another-file'

您可以使用
as
关键字重命名导入和导出。

在 React 中使用导出别名

例如，我们可以使用不同的名称导出组件。

另一个文件.js


function Button() {
  return <button onClick={() => console.log('button clicked')}>Click</button>;
}

// 👇️ export as MyButton
export {Button as MyButton};

我们将组件的导出重命名Button为MyButton，因此现在您可以将其导入为：

应用程序.js


import {MyButton} from './another-file';

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

关键字as可用于重命名导入和导出。

你不必使用默认导出的别名

如果您的组件是使用默认导出导出的，则不必使用关键字
as，因为您可以在导入时直接重命名默认导出。

另一个文件.js


function Button() {
  return <button onClick={() => console.log('button clicked')}>Click</button>;
}

// 👇️ Uses default export
export default Button;

现在，我们可以在不使用关键字的情况下导入Button组件
。MyButtonas

应用程序.js


// 👇️ can directly rename when importing (because default export)
import MyButton from './another-file';

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

The main difference between named and default exports and imports is that 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 (for functions, classes, variables)
in a single file, you would get an error.

In my experience, most real-world codebases exclusively use named exports and
imports, because they make it easier to leverage your IDE for auto-completion
and auto-imports.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: