react项目如何引入组件
引入组件的基本方法
在React项目中，可以通过import语句引入组件。组件可以是本地文件或第三方库中的组件。
import MyComponent from './MyComponent';引入默认导出组件
如果组件是默认导出（export default），可以直接使用上述方式引入。
// MyComponent.js
export default function MyComponent() {
return <div>Hello World</div>;
}
// App.js
import MyComponent from './MyComponent';引入命名导出组件
如果组件是命名导出（export），需要使用花括号指定导出的名称。
// MyComponent.js
export function MyComponent() {
return <div>Hello World</div>;
}
// App.js
import { MyComponent } from './MyComponent';引入第三方库组件
第三方库通常提供组件，可以通过import引入。
import { Button } from 'antd';动态导入组件
使用React.lazy和Suspense可以实现组件的动态导入，适用于代码分割。
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</React.Suspense>
);
}引入多个组件
可以一次性引入多个组件，减少import语句的数量。
import { ComponentA, ComponentB } from './components';使用别名引入组件
在配置了Webpack或Vite的项目中，可以使用别名简化路径。
import MyComponent from '@components/MyComponent';配置示例（vite.config.js）：
export default {
resolve: {
alias: {
'@components': '/src/components',
},
},
};引入CSS或样式文件
如果组件依赖样式文件，可以一并引入。
import './MyComponent.css';
import 'antd/dist/antd.css';注意事项
确保组件文件的路径正确，避免因路径错误导致导入失败。
动态导入仅适用于默认导出组件，命名导出需要额外处理。
使用别名时需确认构建工具的配置是否正确生效。
