当前位置：首页 > React

react如何引用其他组件

2026-01-24 04:45:40React

引用组件的基本方法

在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跨层级传递组件：

react如何引用其他组件

const ComponentContext = React.createContext();

function Parent() {
  return (
    <ComponentContext.Provider value={<Button />}>
      <Child />
    </ComponentContext.Provider>
  );
}

function Child() {
  const component = useContext(ComponentContext);
  return <div>{component}</div>;
}