当我在我的渲染/返回语句中有一个糟糕的引用时，这个问题出现在我身上。(指向不存在的类)。 还要检查return语句代码中的错误引用。

在我的例子中，我的组件中有文本组件，当我像这样导入没有花括号的文本时，这就是错误的原因

import Text from '..';  <-wrong

为了修复这个错误，我像这样在花括号内导入Text

import {Text} from '..';  <-right

我也得到了这个错误。

我用的是:

import BrowserRouter from 'react-router-dom';

费克斯是这样做的:

import {BrowserRouter} from 'react-router-dom';

所以我遇到了这个问题，我用一种奇怪的方式解决了它。我想我应该把它扔了，以防其他人遇到它，变得绝望。

我有一个有条件地呈现react元素，它只在对象状态大于零时才会呈现。在呈现函数中-当三元运算符被证明为真时，我收到了这篇文章所涉及的错误。我使用了一个<React。片段>在我的渲染函数-这是我通常分组子的方式，而不是更新的方式与更新的短语法(<>和</>)。

However, when I changed the <React.Fragment> to the short syntax - the react element rendered correctly and the error stopped appearing. I took a look at Facebooks React-Fragment documentation, and I don't see any reason on there to believe there is a dramatic difference between the two that would cause this. Regardless, below are two simplified snippets of code for your review. The first one demonstrates the code that was yielding the error, and the second one demonstrates the code that fixed the issue. At the bottom is the render function of the component itself.

希望有人觉得这有帮助。

代码示例1 -错误 有条件渲染的React元素

  renderTimeFields = () => {
    return (
      <React.Fragment>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </React.Fragment>
    );
  }

代码示例2 -无错误 有条件渲染的React元素

  renderTimeFields = () => {
    return (
      <>
        <div className="align-left">
                <div className="input-row">
                  <label>Date: </label>
                  <input type="date" className="date" name="date" min={new Date().toISOString().split('T')[0]} required/>
                </div>
              </div>
              <div className="align-left sendOn-row">
                <div className="input-row">
                  <label>Time: </label>
                  <input type="time" className="time" name="time" required/>
                </div>
              </div>
      </>
    );
  }

在组件中呈现函数

render() {
<form>
...
{emailsInActiveScript > 1 ? this.renderTimeFields() : null}
</form>
etc...
}

我所缺少的是我正在使用

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

正确答案应该是:

import { BrowserRouter as Router, Route } from 'react-router-dom';

当然你需要添加npm包react-router-dom:

npm install react-router-dom@next --save

我刚刚花了30分钟来解决这个基本的问题。

我的问题是我导入react原生元素

例如导入React，{文本，图像，组件}从' React ';

并试图使用它们，这导致我收到这个错误。

一旦我从<文本>切换到<p>和<图像>到<img>，一切都按预期工作。