react如何引入一个组件
引入组件的方法
在React中引入组件主要有两种方式：默认导入和命名导入。具体方法取决于组件的导出方式。
默认导入
适用于组件使用export default导出的情况：
import ComponentName from './ComponentPath';命名导入
适用于组件使用命名导出（无default）的情况：
import { ComponentName } from './ComponentPath';路径规范注意事项
- 本地组件通常使用相对路径（
./或../） - 第三方库组件直接写包名（如
import React from 'react'） - 文件扩展名
.js/.jsx可省略（需配置webpack/resolve）
实际使用示例
假设有个Button.jsx组件：
// 默认导出方式
export default function Button() {
return <button>Click</button>;
}引入并使用：
import Button from './components/Button';
function App() {
return <Button />;
}动态导入（按需加载）
使用React.lazy实现代码分割：
const LazyComponent = React.lazy(() => import('./ComponentPath'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}注意事项
- 确保组件文件路径正确
- 命名导入时组件名称必须与导出名称完全一致
- 动态导入仅适用于默认导出的组件
- 类组件和函数组件的引入方式相同
