时间戳

首页 > 解决方案 > 如果用作类扩展器，则重新导出 es6 类模块不起作用

javascript - 如果用作类扩展器，则重新导出 es6 类模块不起作用

问题描述

我有5个js文件，

我已经使用名称导出了一个新组件，bar.js然后使用相同的NewComponent 名称route.js重新导出NewComponent，other.js NewComponent工作正常，但 indummy.js NewComponent未定义，而如果直接从导入bar.js NewComponent可以正常运行（请参阅sample.js），我犯了错误吗？

/* bar.js */
import { Component } from 'react'
export default class NewComponent extends Component { }


/* route.js */
export { default as NewComponent } from './bar'

/* other.js */
import { NewComponent } from './route'
export default class Other extends Component {
  render() {
    return (
      <NewComponent /> /* work */
    )
  }
}

/* dummy.js */
import { NewComponent } from './route'
export default class Dummy extends NewComponent { } /* undefined is not an object (evaluating '_bar.default') */


/* sample.js */
import NewComponent from './bar'
export default class Sample extends NewComponent { } /* work */

标签： javascriptreactjsreact-nativeecmascript-6

解决方案

你需要像这样导入（没有花括号{...}）

/* dummy.js */
import NewComponent from './route'; // this is import Other component

看到other.js您正在导出Other为默认组件并NewComponent在内部使用组件Other，而不是像您在route.js

在此处阅读有关默认导入与命名导入的更多信息https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910

推荐阅读