react如何导入组件
导入组件的方法
在React中导入组件主要有两种方式：默认导入和命名导入。具体方法如下：
默认导入
适用于组件通过export default导出的情况：
import ComponentName from './path/to/Component';命名导入
适用于组件通过命名导出（如export const Component）的情况：
import { ComponentName } from './path/to/Component';路径写法规范
相对路径从当前文件出发：
import Button from '../components/Button'; // 上级目录
import Header from './Header'; // 同级目录绝对路径需要配置jsconfig.json或tsconfig.json：
import Component from 'src/components/Component';动态导入（懒加载）
使用React.lazy实现代码分割：
const LazyComponent = React.lazy(() => import('./LazyComponent'));需配合Suspense使用：
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>类型组件导入（TypeScript）
带有类型定义的组件导入：
import React, { ReactElement } from 'react';
import type { Props } from './Component';注意事项
- 确保文件扩展名正确（.js/.jsx/.tsx）
- 循环引用会导致加载失败
- Webpack/Babel需配置正确解析规则
- 动态导入不能用于服务端渲染(SSR)的初始加载
