如何在单次导出中同时导出带HOC与不带HOC的组件？

完全没问题在一次导出操作中同时提供经过HOC处理和未处理的原生组件，我给你分享几种实用的实现方式，包括在index.js里的写法：

方法1：组件文件内直接声明双导出 #

在你的组件源文件里，先定义原生组件，再用HOC包装它，最后同时导出两者：

// MyComponent.js
import React from 'react';
import withSomeHOC from './path/to/withSomeHOC';

// 原生未处理组件
const MyComponent = ({ title }) => {
  return <h1>{title}</h1>;
};

// 经过HOC处理的组件
const MyComponentWithHOC = withSomeHOC(MyComponent);

// 同时导出两个组件
export { MyComponent, MyComponentWithHOC };

对应的index.js可以直接重新导出这两个组件，让外部更方便引入：

// index.js
// 直接转发组件文件的导出
export { MyComponent, MyComponentWithHOC } from './MyComponent';

方法2：默认导出HOC组件，命名导出原生组件 #

如果习惯用默认导出处理后的组件，同时用命名导出保留原生版本，这种写法也很常见：

// MyComponent.js
import React from 'react';
import withSomeHOC from './path/to/withSomeHOC';

const MyComponent = ({ title }) => {
  return <h1>{title}</h1>;
};

// 默认导出HOC处理后的组件
export default withSomeHOC(MyComponent);
// 命名导出原生组件（用清晰的别名区分）
export { MyComponent as MyComponentUnwrapped };

在index.js里可以这样统一导出：

// index.js
export { 
  default as MyComponentWithHOC, 
  MyComponentUnwrapped 
} from './MyComponent';

方法3：在index.js中统一处理HOC #

如果不想在组件源文件里引入HOC，也可以把HOC的包装逻辑放到index.js中：

// MyComponent.js
// 只导出原生组件
import React from 'react';

export const MyComponent = ({ title }) => {
  return <h1>{title}</h1>;
};

然后在index.js里完成HOC包装并导出两个版本：

// index.js
import { MyComponent } from './MyComponent';
import withSomeHOC from './path/to/withSomeHOC';

const MyComponentWithHOC = withSomeHOC(MyComponent);

// 同时导出原生和处理后的组件
export { MyComponent, MyComponentWithHOC };

小提示 #

记得给两个版本的组件起清晰的名字，比如用Unwrapped、Raw或者WithHOC这样的后缀/前缀，避免外部引入时混淆。

内容的提问来源于stack exchange，提问作者lukasz-p