Question

我有5个js文件，

我从bar.js导出了一个名称为NewComponent的新组件然后在route.js上重新导出同名NewComponent，在other.js NewComponent上工作正常，但在dummy.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 */

更新这是我的示例代码 https://codesandbox.io/s/km5n6o757v

Answer 1

您需要以这种方式导入（{...}周围没有花括号）

/* 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

上了解有关默认导入与命名导入的更多信息

如果用作类扩展器，则无法重新导出es6类模块

1 个答案: