如何引入react组件
引入React组件的方法
在React中引入组件通常有以下几种方式，具体取决于组件的来源和项目配置。
导入本地组件
本地组件通常存放在项目目录中，可以通过相对路径导入：
import MyComponent from './components/MyComponent';确保组件文件使用.jsx或.js扩展名，并且默认导出组件。
导入第三方组件
对于从npm安装的第三方组件库，可以直接通过包名导入：
import { Button } from 'antd';这种方式需要提前通过npm install antd或yarn add antd安装对应依赖。
动态导入组件
对于需要代码分割的场景，可以使用React的lazy和Suspense实现动态导入：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</React.Suspense>
);
}导入默认导出和命名导出
组件文件可能有不同的导出方式，导入语法也有所区别：
// 默认导出
import DefaultExport from './DefaultExport';
// 命名导出
import { NamedExport } from './NamedExports';
// 混合导出
import DefaultExport, { NamedExport } from './MixedExports';TypeScript中的组件导入
在TypeScript项目中，可以添加类型声明：
import React, { FC } from 'react';
interface Props {
title: string;
}
const MyComponent: FC<Props> = ({ title }) => {
return <div>{title}</div>;
};
export default MyComponent;
