当前位置：首页 > React

react项目如何引入组件

2026-01-24 06:54:08React

引入组件的基本方法

在React项目中，可以通过import语句引入组件。组件可以是本地文件中的自定义组件，也可以是第三方库提供的组件。

引入本地组件
确保组件文件路径正确，通常使用相对路径（./或../）引入。

react项目如何引入组件

import MyComponent from './components/MyComponent';

引入第三方库组件
如果使用如react-router-dom、antd等库，直接通过包名引入。

import { Button } from 'antd';

默认导出与命名导出

默认导出（Default Export）
组件文件使用export default导出时，引入时无需花括号。

react项目如何引入组件

// MyComponent.js
export default function MyComponent() { ... }

// 引入方式
import MyComponent from './MyComponent';

命名导出（Named Export）
组件通过命名导出时，需用花括号指定名称。

// utils.js
export function HelperComponent() { ... }

// 引入方式
import { HelperComponent } from './utils';

动态导入（懒加载）

对于性能优化，可使用React.lazy和Suspense实现组件的动态加载。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

注意事项

文件扩展名：若项目配置了resolve.extensions（如Webpack），可省略.js或.jsx后缀。
路径别名：通过jsconfig.json或tsconfig.json配置别名，简化深层路径。
循环依赖：避免组件间相互引用，可能导致运行时错误。

示例：完整组件引入

// App.js
import React from 'react';
import Header from './components/Header'; // 本地组件
import { Button } from 'antd'; // 第三方组件

function App() {
  return (
    <div>
      <Header />
      <Button type="primary">Click</Button>
    </div>
  );
}

export default App;