如何引入react组件
引入 React 组件的几种方法
通过 import 语句引入本地组件
创建一个独立的 .js 或 .jsx 文件，例如 MyComponent.jsx，使用 export default 或命名导出组件。在需要使用的文件中通过 import 引入：
// MyComponent.jsx
function MyComponent() {
return <div>Hello World</div>;
}
export default MyComponent;
// App.jsx
import MyComponent from './MyComponent';引入第三方库组件
通过 npm/yarn 安装的第三方库（如 Material-UI、Ant Design）可直接通过包名引入：
import { Button } from 'antd';动态导入（懒加载）
使用 React.lazy 和 Suspense 实现按需加载，适用于优化性能：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}通过 props 传递组件
可以将组件作为 props 传递给子组件，实现更灵活的嵌套：
function Parent() {
return <Child component={<MyComponent />} />;
}注意事项
- 确保组件文件路径正确，相对路径需根据目录结构调整。
- 动态导入需配合 Webpack 等打包工具使用。
- 第三方组件需提前安装依赖（如
npm install antd）。
