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)

但是，当我将课程更改为以下内容时，它会起作用。

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";

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

将其更改为第一个选项，它将起作用。

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

1 个答案: