反应模棱两可的错误信息："Check the render method of `Constructor`."

Question

我在客户端使用 React 来呈现我的应用程序的视图。

当我在浏览器控制台中查看错误报告时，我有时会看到错误 Check the render method of 'Constructor' 而不是发生错误的 class 的正确名称。

例如， 我会看到如下消息：

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `Constructor`. See https://<fb.me>/react-warning-keys for more information.

为什么我的 class 的名字显示为 Constructor？如何让 React 正确显示 class 的名称。

其他详情：

目前我使用 React.createClass() 创建 classes（即不是 ES6 方式）
我的一些 classes 是使用 https://github.com/clayallsopp/react.backbone 中的 React.createBackboneClass() 创建的，以促进 React 与我们遗留的 Backbone 模型/集合的交互
使用 gulp 和 babel 编译我的 JSX 文件。

Answer 1

这是因为您使用 createClass 创建的组件没有正确的 displayName。将显示名称写入应用程序中的每个组件，您将看到正常消息。

更新：

例如：

const SomeComponent = React.createClass({
    displayName: 'SomeComponent',
    ...
    render() {
        ...
    }
});

export default SomeComponent;

Answer 2

来自React Docs：

displayName string displayName

displayName 字符串用于调试消息。 JSX 自动设置这个值；

试试这个：

var Hello = React.createClass({

  displayName: 'Hello World', // here

  render: function() {
    console.log(this.displayName);
    return <div>Hello {this.props.name}</div>;
  }
});

反应模棱两可的错误信息："Check the render method of `Constructor`."

React ambiguous error messaging: "Check the render method of `Constructor`."

javascript

jsx

reactjs

react-jsx