react函数式声明如何导出

导出 React 函数式组件

在 React 中，函数式组件可以通过多种方式导出，以下是常见的几种方法：

默认导出（Default Export）
使用 export default 直接导出组件，适用于单个主要组件的文件：

function MyComponent() {
  return <div>Hello World</div>;
}
export default MyComponent;

命名导出（Named Export）
通过 export 关键字导出多个组件或变量，适用于需要导出多个内容的文件：

export function ComponentA() {
  return <div>Component A</div>;
}

export function ComponentB() {
  return <div>Component B</div>;
}

同时使用默认导出和命名导出
一个文件可以混合使用两种导出方式：

function MainComponent() {
  return <div>Main Component</div>;
}

function HelperComponent() {
  return <div>Helper Component</div>;
}

export default MainComponent;
export { HelperComponent };

导出箭头函数组件
箭头函数语法也可以用于导出组件：

const MyComponent = () => {
  return <div>Arrow Function Component</div>;
};
export default MyComponent;

导入导出的组件

导入默认导出的组件
使用任意名称导入默认导出的组件：

import MyComponent from './MyComponent';

导入命名导出的组件
必须使用导出时的名称，并用花括号包裹：

import { ComponentA, ComponentB } from './MyComponents';

混合导入默认和命名导出
可以同时导入默认和命名导出的内容：

import MainComponent, { HelperComponent } from './Components';