动态导出React组件

Question

我需要使用HOC向我的组件添加一些额外的属性/功能，然后将其导出。

我有一个HOCWrapper分量为特定的，即像提到的实施在这里 。

index.js

import * as all from './AllMyComponents'

let AllChangedComponents = Object.keys(all).map((key) => {
    return all[key] = HOCWrapper(all[key]);
})

export default AllChangedComponents;

和用法一样：

another.js文件

import {MyComponent} from './index'

尝试动态导出组件时，此方法不起作用，

它可以动态导出吗？

Answer 1

您将无法import {MyComponent} ； 仅当MyComponent是从index.js静态导出时才有效。

由于MyComponent而是从index.js导出的对象的成员，因此您需要导入该对象并将其解构为局部变量：

import wrapped from "./index";
const { MyComponent } = wrapped;

这里的另一个问题是包装代码没有任何意义。 而不是使用包装的函数来计算对象，而是尝试使原始导入（仅在模块自己的作用域中可见，并且不影响其他任何导入./AllMyComponents ） ./AllMyComponents 。

你应该做：

const AllChangedComponents = Object.keys(all)
  .map(k => ({ [k]: HOCWrapper(all[k]) }))
  .reduce((l, r) => ({ ...l, ...r }))