总览
在React中，从其他文件中导入组件：
- 从
A文件中导出组件。比如说，export function Button() {}。 - 在
B文件中导入组件。比如说，import {Button} from './another-file'。 - 在
B文件中使用导入的组件。
another-file.js的文件中导入组件。// ? named export
export function BigButton() {
return (
);
}// ? named export
export const SmallButton = () => {
return (
);
};
下面是我们如何从一个名为
App.js文件中导入组件。// ? named import
import {BigButton, SmallButton} from './another-file';
export default function App() {
return (如有必要，请确保当前路径指向
another-file.js模块。上面的例子假设another-file.js和App.js位于相同的目录下。举例来说，如果
another-file.js位于上层目录，你必须这样导入：import {BigButton} from '../another-file' 。在导入组件时，我们使用大括号包裹组件名称。这被称为命名导入。
import/export语法被称为JavaScript模块。为了能够从不同的文件中导入一个组件，必须使用命名的或默认的导出方式将其导出。上述例子使用了命名导出和导入。【React技巧之导入组件】命名和默认导入导出的主要不同之处在于，在每个文件中，你可以有多个命名导出，但只能有一个默认导出。
默认导入导出 让我们看一个例子，看看我们如何导入一个使用默认导出的组件。
// ? default export
export default function BigButton() {
return (
);
}很重要：如果你导出一个变量（或者箭头函数）作为默认导出，你必须先声明再导出。你不能在同一行内声明变量同时默认导出变量。
const BigButton = () =>{
return (
);
}// ? default export
export default BigButton;
下面是如何使用默认导入来导入组件。
// ? default import
import BigButton from './another-file';
export default function App() {
return (当导入组件时，我们也可以使用不同的名字，比如
Foo。// ? default import
import Foo from './another-file';
export default function App() {
return (这样也会生效，但会令人疑惑，因此应该避免。
根据我的经验，大多数现实世界的代码库只使用命名的导出和导入，因为它们更容易利用你的IDE进行自动完成和自动导入。 你也不必考虑哪些成员是用默认导出或命名导出的。混合导入导出 你也可以混合匹配，下面示例的文件使用了默认导出和命名导出。
// ? default export
export default function BigButton() {
return (
);
}// ? named export
export const SmallButton = () => {
return (
);
};
下面是如何导入这两个组件。
// ? default and named imports
import BigButton, {SmallButton} from './another-file';
export default function App() {
return (我们使用默认导入来导入
BigButton组件，使用命名导入来导入SmallButton组件。请注意，每个文件只能有一个默认导出，但你可以根据需要有多个命名导出。
推荐阅读
- React技巧之发出http请求
- React技巧之检查元素是否可见
- React技巧之处理tab页关闭事件
- javascript|客观评价 增长趋势比 vite 还猛的 TailwindCSS
- react|react3-Redux
- 工具实例|react+react-beautiful-dnd实例代办事项
- React|【React】3_使用react组件化编码流程及案例分享（附源码）
- react.js|react-vant 实现黑暗模式
- react|react2-高阶组件与路由