nodejs 041: React组件 JSX基础语法规则 02 导入时“{}”的作用

默认导出&命名导出

• 默认导出：export default Home; 和 import Home from './Home';

  • 适用于当模块导出的是一个单一的实体（比如一个组件、函数或类）。
  • 导入时可以起任何名字，导入的内容是默认导出的那个。

• 命名导出：export const Home = ...; 和 import { Home } from './Home';

  • 适用于模块导出多个不同的实体（比如多个函数或组件）。
  • 导入时必须使用与导出时相同的名称。

默认导入 import Home from ‘./Home’;

• 默认导入（default import）用来导入模块中默认导出的内容。

例子：

// Home.js
const Home = () => {
  return <div>Home Component</div>;
};

export default Home;  // 这里是默认导出

// 其他地方的使用
import Home from './Home';  // 使用默认导入

命名导入 import { Home } from ‘./Home’;

例子：

// Home.js
export const Home = () => {  // 这里是命名导出
  return <div>Home Component</div>;
};

// 其他地方的使用
import { Home } from './Home';  // 使用命名导入

• export const Home = ...; 表示模块以命名方式导出 Home 组件。
• 使用 import { Home } from './Home'; 时必须使用与导出时相同的名称（即 Home）。否则会报错 export ‘Home’ (imported as ‘Home’) was not found in ‘./Home’ (possible exports: default)

CG

• nodejs 019: React组件 JSX基础语法规则