反应组件中的两个导出声明

Question

我使用以下结构创建了一个组件。

class Chip extends React.Component {
    //Some Code
}
export default Chip;

当我运行组件时，出现以下错误。

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
    at invariant (webpack-internal:///1:42)
    at instantiateReactComponent (webpack-internal:///79:72)
    at instantiateChild (webpack-internal:///147:42)
    at eval (webpack-internal:///147:69)
    at traverseAllChildrenImpl (webpack-internal:///83:75)
    at traverseAllChildrenImpl (webpack-internal:///83:91)
    at traverseAllChildren (webpack-internal:///83:170)
    at Object.instantiateChildren (webpack-internal:///147:68)
    at ReactDOMComponent._reconcilerInstantiateChildren (webpack-internal:///146:183)
    at ReactDOMComponent.mountChildren (webpack-internal:///146:222)

但是当我将 class 更改为以下内容时，它起作用了。

export class Chip extends React.Component {
    //Some Code
}
export default Chip;

我做错了什么？

Answer 1

如果你这样做

export default Chip;

你必须像这样导入它：

import Chip from "./Chip";

如果你这样做

export { Chip, helperA, helperB };

或

export class Chip // etc..
export const helperA // yada yada yada

你必须像这样导入它：

import { Chip, helperA, helperB } from "./Chip";

如果 export class 有效，那么您必须像我给您的第二个选项一样导入它。

改成第一个选项就可以了

反应组件中的两个导出声明

Two export declarations in react component

components

export

class

reactjs