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>
  );
}

注意事项

• 确保组件文件路径正确
• 命名导入时组件名称必须与导出名称完全一致
• 动态导入仅适用于默认导出的组件
• 类组件和函数组件的引入方式相同