JavaScript React 中导出高阶组件应优先导出已包装的组件，如 export default withAuth(Profile)；也可同时命名导出原始组件（export const RawProfile = Profile）和增强版本；通用 HOC 则单独导出函数本身。

在 JavaScript（特别是 React 项目）中，用 export 导出经过包装的高阶组件（HOC），关键在于先定义 HOC，再用它包裹目标组件，最后导出被包装后的结果——而不是导出 HOC 函数本身（除非你有意暴露可复用的 HOC）。

导出已包装的组件（最常见场景）

这是业务开发中最常用的方式：你写好一个 HOC（比如 withAuth、withLoading），然后用它增强某个具体组件，并直接导出增强后的版本。

• 确保 HOC 返回的是一个新组件（函数或类），且接收并透传 props
• 被包装组件应使用命名导出或默认导出，取决于你的模块规范
• 不要在导出时调用 HOC（如 export default withAuth(MyComponent)()），避免执行时机错误

示例：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

```jsx
import React from 'react';

// 高阶组件：注入 user 和 logout 方法
const withAuth = (Component) => {
  return function WithAuth(props) {
    const [user, setUser] = React.useState(null);
    const logout = () => setUser(null);
    return <Component {...props} user={user} logout={logout} />;
  };
};

// 原始组件
const Profile = ({ user, logout }) => (
  <div>
    <h2>欢迎，{user?.name || '游客'}</h2>
    <button onClick={logout}>退出登录</button>
  </div>
);

// ✅ 正确：导出已被 withAuth 包装后的组件
export default withAuth(Profile);
```

同时导出原始组件和包装后组件

便于测试或按需使用（例如 Storybook 中需要裸组件）。

立即学习“Java免费学习笔记（深入）”；

• 用命名导出保留原始组件（如 export const RawProfile = Profile;）
• 用默认导出或另一个命名导出提供增强版本

```jsx
export const RawProfile = Profile;
export default withAuth(Profile);
// 或：
// export const AuthenticatedProfile = withAuth(Profile);
```

导出 HOC 本身（供其他模块复用）

如果你封装的是通用 HOC（如 withErrorBoundary），应单独导出该函数，而非立即包装某组件。

• HOC 必须是纯函数，只接收组件、返回新组件
• 避免在 HOC 内部做副作用（如直接发请求），应在包装后的组件内部处理
• 建议为 HOC 添加 displayName，方便调试（React DevTools 中显示有意义的名字）

```jsx
export const withErrorBoundary = (Component) => {
  return class extends React.Component {
    state = { hasError: false };
    static getDerivedStateFromError() { return { hasError: true }; }
    render() {
      return this.state.hasError
        ? <div>加载失败，请重试</div>
        : <Component {...this.props} />;
    }
  }
};

// 使用方：
// import { withErrorBoundary } from './hoc';
// export default withErrorBoundary(Dashboard);
```

注意事项与常见陷阱

• 不要在 HOC 中修改原始组件的静态属性（如 Component.propTypes），而应通过 hoist-non-react-statics 库继承
• ESLint 可能警告“no-unused-vars”，对 HOC 参数 Component 加上 /* eslint-disable no-unused-vars */ 注释（或配置规则）
• 使用函数式组件 + Hooks 时，HOC 仍有效，但更推荐用自定义 Hook 替代简单逻辑（如 useAuth）
• 若用 TypeScript，需为 HOC 正确标注泛型，确保 props 类型穿透