React 组件的导入与导出是构建 React 应用程序的基础操作之一。通过使用 ES6 模块系统，我们可以将 React 组件拆分成不同的文件，并在需要时将它们导入到其他文件中，从而实现代码的组织和复用。下面将详细介绍 React 组件的导入与导出，并通过示例来说明。
React 组件的导出
在 React 中，组件的导出通常使用 export 关键字。我们可以选择默认导出（export default）或命名导出（export）的方式。
默认导出
默认导出允许我们导出单个组件或函数，并在导入时给它指定一个名称。
// MyButton.js
import React from 'react';
const MyButton = ({ onClick, children }) => {
return (
<button onClick={onClick}>
{children}
</button>
);
};
export default MyButton;
在上面的例子中，我们定义了一个名为 MyButton 的函数组件，并使用 export default 将其导出。
命名导出
命名导出允许我们在同一个文件中导出多个组件或函数，并为每个导出指定一个名称。
// MyComponents.js
import React from 'react';
const MyHeader = () => {
return <header>这是页眉</header>;
};
const MyFooter = () => {
return <footer>这是页脚</footer>;
};
export { MyHeader, MyFooter };
在这个例子中，我们定义了两个组件 MyHeader 和 MyFooter，并使用命名导出的方式将它们导出。
React 组件的导入
导入组件时，我们需要使用 import 关键字，并根据导出的方式来指定导入的语法。
导入默认导出的组件
当导入默认导出的组件时，我们可以使用任意名称来接收导入的组件。
// App.js
import React from 'react';
import MyButton from './MyButton'; // 导入默认导出的 MyButton 组件
const App = () => {
const handleClick = () => {
console.log('按钮被点击了！');
};
return (
<div>
<MyButton onClick={handleClick}>点击我</MyButton>
</div>
);
};
export default App;
在上面的 App.js 文件中，我们导入了 MyButton.js 文件中默认导出的 MyButton 组件，并在组件中使用它。
导入命名导出的组件
当导入命名导出的组件时，我们需要使用大括号 {} 来包围要导入的组件名称。
import React from 'react';
import { MyHeader, MyFooter } from './MyComponents'; // 导入命名导出的 MyHeader 和 MyFooter 组件
const Layout = ({ children }) => {
return (
<div>
<MyHeader />
{children}
<MyFooter />
</div>
);
};
export default Layout;
在 Layout.js 文件中，我们导入了 MyComponents.js 文件中命名导出的 MyHeader 和 MyFooter 组件，并在 Layout 组件中使用它们。
注意事项
1.导入路径应正确指向组件文件的位置，可以是相对路径或绝对路径。
2.当使用默认导出时，可以自由选择导入时的组件名。但使用命名导出时，导入时必须使用与导出时相同的名称。
3.导入和导出组件时，应保持文件名和组件名的一致性，以提高代码的可读性。
通过上述示例，我们可以看到 React 组件的导入与导出非常简单直观。它们允许我们将组件拆分成独立的文件，并在需要时将它们组合在一起，构建出复杂且可维护的 React 应用程序。
