反应模棱两可的错误消息：“检查`Constructor`的渲染方法。”答案

【问题标题】：React ambiguous error messaging: "Check the render method of `Constructor`."反应模棱两可的错误消息：“检查`Constructor`的渲染方法。”
【发布时间】：2016-07-14 19:38:19
【问题描述】：

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

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

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

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.

为什么我的班级名称显示为Constructor？如何让 React 正确显示类的名称。

其他细节：

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

【问题讨论】：

标签： javascript reactjs react-jsx jsx

【解决方案1】：

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

更新：

例如：

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

export default SomeComponent;

【讨论】：

【解决方案2】：

来自React Docs：

显示名称 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>;
  }
});

【讨论】：