Question

我有Test组件，我想在ShowTest中使用它

import React from "react";

export default class Test extends React.Component{
    render() {
        return (
            <div>hi test</div>

        );

    }
}

我正在将Test呈现给ShowTest，如下所示

import {Test} from "./test";
import React from "react";
export default class ShowTest extends React.Component{
    render() {
        return (
            <div>
            <Test />
            </div>

        );

    }
}

然后我将ShowTest用于另一个组件但是我收到了这个错误

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

无法弄清楚为什么会这样。

Answer 1

您导入Test组件的语法似乎是错误的。

由于您已将Test导出为默认值，因此在ShowTest中导入时，您不需要围绕它的花括号。

import {Test} from "./test";

应该是

import Test from "./test";

Answer 2

仔细检查，但这两个组件是两个独立的文件吗？

如果它们都在同一个文件中，则语法关闭，因为在声明export default class name extends React.Component时只能有一个默认值。

如果它们位于两个单独的文件中，请仔细检查它们是否都有import React from "react"，这可能是导致错误的原因。可能导致错误的另一个问题是组件未被包含在内，因此不知道是什么。

将一个组件渲染到另一个组件

2 个答案: