react项目如何引入组件

引入本地组件

在React项目中引入本地组件，需确保组件文件路径正确。假设组件文件为MyComponent.js，位于同一目录下：

import MyComponent from './MyComponent';

若组件位于子目录components中：

import MyComponent from './components/MyComponent';

组件文件需默认导出（使用export default），否则需解构导入。

引入第三方组件

通过npm或yarn安装的第三方组件（如react-router-dom），直接使用包名导入：

import { Button } from 'antd'; // 以Ant Design为例

安装命令示例：

npm install antd

动态导入组件

使用React.lazy和Suspense实现按需加载，适用于代码分割：

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

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

注意事项

• 组件文件扩展名可为.js、.jsx或.tsx（TypeScript项目）。
• 路径别名需配置jsconfig.json或webpack，避免冗长路径。
• 默认导出与命名导出不可混用，需根据组件导出方式选择导入语法。