我得到了几乎相同的错误:

Uncaught (in promise)错误:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)，但得到:object。

我试图从我的团队开发的另一个节点库导入一个纯功能组件。为了解决这个问题，我必须将其更改为绝对导入(引用node_modules内部组件的路径)

import FooBarList from team-ui

to

import FooBarList from team-ui/lib/components/foo-bar-list/FooBarList

在我的例子中，它最终是像这样导入的外部组件:

import React， {Component}

然后声明如下:

导出默认类MyOuterComponent

其中一个内部组件导入了React bare:

import React from

用虚线表示声明:

导出默认类MyInnerComponent

在嵌套组件时，您是否厌倦了简单的导入/导出回答?

好吧，当我试图把道具从父母传递给孩子时，孩子应该渲染兄弟姐妹组件。

比方说，你有一个BaseDialog(父)组件，你想在其中有另一个SettingsDialog(子)组件，你想在其中呈现它的独立组件。

BaseDialog.tsx

import BaseButton from "./../BaseButton";
...
<SettingsDialog
  BaseButton={<BaseButton title="Connect Wallet" />}
/>

你试图在settings。dialog。tsx的某个地方进行渲染

const SettingsDialog = (props: {
  BaseButton: any;
}) => {
  const { BaseButton } = props;

  return(
    <div>
      {BaseButton}
    </div>
  );
}

(是的，这是一种方便的方法来传递组件的父->子，特别是当它们增长时，但在这里它会中断)，但它会导致Uncaught Error: Invariant Violation:元素类型是无效的:期望一个字符串(对于内置组件)或类/函数，但got: object错误。

你能做的是，修复它，并仍然使用BaseButton，只是单独导入它。

Settings.Dialog.tsx

import BaseButton from "./../BaseButton";

const SettingsDialog = () => {
  return(
    <div>
      <BaseButton title="Connect Wallet" />
    </div>
  );
}

在parent中

BaseDialog.tsx

<SettingsDialog />

您试图实现的是相同的，并将修复这个不直观的错误。

在我的例子中，我假设BaseDialog有一个名称标题的必需道具。

错误呢?这肯定是一个导入或导出的问题，你引用了一个组件或容器，要么你没有从它的定义脚本导出，要么你在导入它时使用了错误的格式。

解决方案吗?

遍历所有的组件/容器定义，并确保在脚本的末尾导出了它们，例如“export default 'yourcomponentname';”或者在组件定义的开头，例如“export default 'yourcomponentname'; Export const 'yourcomponentname'=() =>{ …… ｝ 在导入语句中，确保没有根据相应的导出语句将命名导入和默认导入混为一谈

您需要导出default或require(path).default

var About = require('./components/Home').default

对我来说，我的样式组件是在我的功能组件定义之后定义的。它只发生在舞台上，对我来说不是局部的。一旦我把我的样式化组件移到组件定义的上方，错误就消失了。