默认导出 vs 具名导出

一个文件里有且仅有一个 默认 导出,但是可以有任意多个 具名 导出。 组件的导出方式决定了其导入方式。当你用默认导入的方式,导入具名导出的组件时,就会报错。如下表格可以帮你更好地理解它们:

语法 导出语句 导入语句
默认 export default function Button() {} import Button from './Button.js';
具名 export function Button() {} import { Button } from './Button.js';

当使用默认导入时,你可以在 import 语句后面进行任意命名。比如 import Banana from './Button.js',如此你能获得与默认导出一致的内容。相反,对于具名导入,导入和导出的名字必须一致。这也是称其为 具名 导入的原因!

通常,文件中仅包含一个组件时,人们会选择默认导出,而当文件中包含多个组件或某个值需要导出时,则会选择具名导出。 无论选择哪种方式,请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件,比如 export default () => {},因为这样会使得调试变得异常困难。

相关推荐
专业抄代码选手19 小时前
08|Fiber 上的 `useState`:状态终于属于具体组件
前端·javascript·react.js
BreezeJiang1 天前
为什么生成了 dist,项目还是可能跑不起来?从一个 React + Express + MySQL 项目看部署闭环
nginx·react.js
奴心1 天前
我受够了 value / defaultValue / onChange 三连——一个 prop 重构 React 受控组件
react.js
用户298698530141 天前
React 中 HTML 内容转 Word 文档的实现方案
javascript·react.js·html
浮生望2 天前
React JWT 登录鉴权实战:Zustand 状态管理 + Axios 拦截器 + 路由守卫完整链路
react.js
光影少年2 天前
react navite 安卓iOS 打包、签名、环境区分
前端·react native·react.js
会编程的土豆2 天前
从零理解 AI Agent:概念、ReAct、Prompt 五要素与面试要点
人工智能·react.js·prompt
zzzzzz3102 天前
react-bits:把酷炫动效从“灵感截图”变成可复用的 React 组件
javascript·react.js·动效
YHHLAI3 天前
React + TypeScript 实战:从零构建颜色选择器应用
前端·react.js·typescript