react如何引用组件
引用组件的基本方法
在React中引用组件通常分为两种方式：通过默认导出（default export）或命名导出（named export）。组件的文件路径需正确，确保导入路径与文件实际位置匹配。
默认导出组件的引用方式：
import ComponentName from './path/to/Component';命名导出组件的引用方式：
import { ComponentName } from './path/to/Component';动态导入组件
使用React.lazy和Suspense实现组件的动态加载，适用于代码分割场景：
const LazyComponent = React.lazy(() => import('./path/to/Component'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}高阶组件（HOC）中的引用
通过高阶组件包装目标组件时，引用方式如下：
import { withRouter } from 'react-router-dom';
const WrappedComponent = withRouter(ComponentToWrap);通过props传递组件引用
可以将组件作为props传递给子组件：
function Parent() {
return <Child component={<ExampleComponent />} />;
}
function Child({ component }) {
return <div>{component}</div>;
}使用forwardRef转发引用
需要直接访问子组件的DOM元素时，使用forwardRef：
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="fancy-button">
{props.children}
</button>
));
function App() {
const ref = React.useRef();
return <FancyButton ref={ref}>Click</FancyButton>;
}注意事项
确保组件文件扩展名为.jsx或.js，且文件名使用PascalCase命名约定（如MyComponent.jsx）。循环引用可能导致问题，应通过提升公共依赖或重构组件结构来解决。
