为什么要从一个模块导出组件并在另一个模块的组件中使用？

在前端开发中，将应用程序拆分为不同的模块或组件是一种很好的实践，使得代码更具可维护性和可重用性。有时候需要从一个模块导出组件，以便在另一个模块中将其作为子组件使用。

在组件名称前使用 export 关键字，将组件导出。

// Component A in module A
export const ComponentA = () => {
  return (
    <div>
      <h1>Component A</h1>
    </div>
  )
}

然后在另一个模块或组件中导入该组件，并在 JSX 中使用。

import { ComponentA } from './moduleA'

// Component B in module B
const ComponentB = () => {
  return (
    <div>
      <h1>Component B</h1>
      <ComponentA />
    </div>
  )
}

export default ComponentB

这样，你可以在模块 B 的组件中直接使用模块 A 中导出的 ComponentA 组件，从而提高了代码的重用性和模块化程度。