未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

我发现了此错误的另一个原因。它与CSS-in-JS在React组件中向返回函数的顶级JSX返回null值有关。

例如：

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

我会收到以下警告：

警告：React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：null。

随后出现此错误：

未捕获的错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：null。

我发现这是因为我没有尝试渲染带有CSS-in-JS组件的CSS。我通过确保返回了CSS而不是null值来解决了这个问题。

例如：

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

我有同样的问题，问题是该特定页面的捆绑中未包含一些js文件。尝试包括那些文件，问题可能已解决。我这样做：

.Include("~/js/" + jsFolder + "/yourjsfile")

它为我解决了这个问题。

这是我在Dot NEt MVC中使用React的时候

对我来说，我的样式化组件是在功能组件定义之后定义的。这只是在演出中发生，而不是在我本地发生。将样式化的组件移到组件定义上方后，错误消失了。

我遇到了一个问题React.Fragment，因为我的react版本是< 16.2，所以我摆脱了它。

除了import/ export提到的问题。我发现使用React.cloneElement()添加props到子元素然后渲染它给了我同样的错误。

我不得不改变：

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

至：

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

有关更多信息，请参阅React.cloneElement() 文档。

我在响应路由中遇到此错误，问题是我正在使用

<Route path="/" component={<Home/>} exact />

但是这是错误的路线，要求组件作为类/函数，所以我将其更改为

<Route path="/" component={Home} exact />

而且有效。（请避免在组件周围使用大括号）

就我而言，我使用的是默认导出，但不导出functionor或React.Component，而只是导出一个JSX元素，即

错误：

export default (<div>Hello World!</div>)

作品：

export default () => (<div>Hello World!</div>)

当我在同一目录中具有相同根名称的.jsx和.scss文件时，遇到了此错误。

因此，举例来说，如果你有Component.jsx和Component.scss在同一个文件夹，你尝试这样做：

import Component from ./Component

Webpack显然感到困惑，至少在我的情况下，当我真的想要.jsx文件时，尝试尝试导入scss文件。

我能够通过重命名.scss文件并避免歧义来修复它。我也可以显式导入Component.jsx

另一个可能的解决方案，对我有用：

当前，react-router-redux处于beta中，npm返回4.x，但不返回5.x。但是@types/react-router-redux返回了5.x。因此，使用了未定义的变量。

强制NPM / Yarn使用5.x为我解决了该问题。

在我的情况下，导入是由于库而隐式发生的。

我设法通过更改来解决

export class Foo

至

export default class Foo。

就我而言，这是由错误的注释符号引起的。这是错误的：

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

这是对的：

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

注意大括号

就我而言，导出的子模块之一未返回适当的react组件。

const Component = <div> Content </div>;

代替

const Component = () => <div>Content</div>;

显示的错误是针对父级的，因此无法确定。

您是否刚刚对任何React组件进行了模块化？如果是，则如果忘记指定module.exports，则会出现此错误，例如：

non-modularized previously valid component/code:

var YourReactComponent = React.createClass({
    render: function() { ...

modularized component/code with module.exports:

module.exports = React.createClass({
    render: function() { ...