Question

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

我有一个{H}的HOCWrapper组件，其实现方式与提到的here类似。

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的任何其他人），而不是计算具有包装函数的对象。

你应该这样做：

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

动态导出React组件

1 个答案: