javascript - 如何使用不直接导出的组件？

Question

我需要使用一个没有直接导出的组件，如下：在库文件夹TopComponent/index.js中，它是：

import NeededModule from "./NeededModule";
import TopComponent from "./presenters/TopComponent";

TopComponent.NeededModule = NeededModule ;

export default TopComponent; // the library only export this

在我的代码中，我只能导入 TopComponent。使用以下代码：

//my code
import TopComponent from '@lib/topcomponent';
...
render () {
    return ( <TopComponent.NeededModule /> )
}

会报错

无法读取未定义的属性“NeededModule”

我该如何使用该组件？在调试期间检查，在 webpack 生成的文件中，在渲染函数中，它包含一个 return _React2.default.createElement(_topComponent.TopComponent.NeededModule,...未定义TopComponent的行。如果我修改 webpack 生成的 js 文件，将行更改为return _React2.default.createElement(_topComponent.default.NeededModule,...it will work..

标签： javascriptreactjs

Answer 1

你有没有尝试

// in TopComponent/index.js
export { default as NeededModule } from './NeededModule';
export { default as TopComponent } from './TopComponent';

// in your code
import { TopComponent, NeededModule } from '@lib/topcomponent';

我知道这不是你真正想要做的，但我认为它会有所帮助。