react如何引用其他组件
引用组件的基本方法
在React中引用其他组件通常通过import语句实现。假设有一个名为Button的组件保存在Button.js文件中：
// Button.js
function Button() {
return <button>Click Me</button>;
}
export default Button;在另一个文件中引用并使用它：
// App.js
import Button from './Button';
function App() {
return (
<div>
<Button />
</div>
);
}通过相对路径导入
组件的引用路径需根据文件位置调整。若组件位于子目录中：
import Header from './components/Header';若组件位于父目录中：
import Utility from '../utils/Utility';命名导出与默认导出
组件可以通过命名导出或默认导出。命名导出允许同时导出多个组件：
// components.js
export function Card() { /* ... */ }
export function List() { /* ... */ }使用时需解构导入：
import { Card, List } from './components';动态导入懒加载
对于性能优化，可使用React.lazy动态导入组件：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}高阶组件（HOC）模式
通过高阶组件包装其他组件：
function withLogger(WrappedComponent) {
return function(props) {
console.log('Rendered:', WrappedComponent.name);
return <WrappedComponent {...props} />;
};
}
const EnhancedButton = withLogger(Button);通过Props传递组件
组件可以作为props传递给其他组件：
function Container({ children }) {
return <div className="container">{children}</div>;
}
function App() {
return (
<Container>
<Button />
</Container>
);
}使用Context共享组件
通过React Context跨层级传递组件：
const ComponentContext = React.createContext();
function Parent() {
return (
<ComponentContext.Provider value={<Button />}>
<Child />
</ComponentContext.Provider>
);
}
function Child() {
const component = useContext(ComponentContext);
return <div>{component}</div>;
}
