当前位置：首页 > React

react如何引用其他组件

2026-03-31 12:14:11React

在 React 中引用其他组件

React 组件可以通过导入（import）和直接调用的方式引用其他组件。以下是具体实现方法：

1. 导出和导入组件

确保被引用的组件已通过 export 导出（默认导出或命名导出）。例如，创建一个 Button.js 组件：

// Button.js
function Button() {
  return <button>Click Me</button>;
}
export default Button; // 默认导出

在另一个文件中通过 import 引用：

// App.js
import Button from './Button'; // 路径根据实际结构调整

function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

2. 命名导出的引用方式

若组件是命名导出（非默认导出），需用 {} 包裹组件名导入：

react如何引用其他组件

// Button.js
export function Button() { /* ... */ } // 命名导出

// App.js
import { Button } from './Button';

3. 动态导入（懒加载）

使用 React.lazy 和 Suspense 实现按需加载，适用于性能优化：

const LazyButton = React.lazy(() => import('./Button'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyButton />
    </React.Suspense>
  );
}

4. 传递 Props 与子组件

react如何引用其他组件

引用组件时可传递属性（props）或子元素：

<Button color="blue" onClick={handleClick}>
  Submit
</Button>

5. 高阶组件（HOC）引用

通过高阶组件包装目标组件，增强其功能：

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const EnhancedButton = withLogging(Button);

注意事项