对于 React JS，如何解决“未捕获的 TypeError：无法构造 'Comment'：请使用 'new' 操作.....”？

Posted

技术标签:

【中文标题】对于 React JS，如何解决“未捕获的 TypeError：无法构造 \'Comment\'：请使用 \'new\' 操作.....”？【英文标题】：How to resolve "Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat....." with respect to React JS?对于 React JS，如何解决“未捕获的 TypeError：无法构造 'Comment'：请使用 'new' 操作.....”？ 【发布时间】：2016-03-23 13:06:06 【问题描述】：

我在 body 中有一个 home.jsp

<body>
    <script type="text/babel" src="../resources/scripts/example.js"></script>
     <a href="javascript:Comment();">News</a>
</body>

在单独的 example.js 中，我有以下内容

alert("I am coming here ... BEEP");

var Comment = React.createClass(
      loadCommentsFromServer: function() 
        $.ajax(
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) 
            this.setState(data: data);
          .bind(this),
          error: function(xhr, status, err) 
            console.error(this.props.url, status, err.toString());
          .bind(this)
        );
      ,
      getInitialState: function() 
        return data: [];
      ,
      componentDidMount: function() 
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
      ,
      render: function() 
        return (
          <div className="comment">       
            <Comment data=this.state.data />
            <span dangerouslySetInnerhtml=__html: data />
          </div>
        );      
      
    );

    ReactDOM.render(
      <Comment url="/workingUrl" pollInterval=2000 />,
      document.getElementById('content')
    );

我在 Chrome 控制台中收到以下错误。

Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' 
operator, this DOM object constructor cannot be called as a function.

我在 home.jsp 文件中添加了 React js 标签。

如何解决这个问题？请帮帮我。

【问题讨论】：

【参考方案1】：

同意特洛伊卡尔森的上述回答。我在 React 本机项目中遇到了类似的问题。我在里面使用了一些内置组件（React native），但没有导入它。全部正确导入后，错误消失了

import 
    FlatList,
    SafeAreaView,
    Text,
    View,
    ...
     from "react-native";

【讨论】：

【参考方案2】：

也许这会对和我有同样问题的人有所帮助...我只是忘记导入我试图渲染的组件（使用 ES6）：

import  Comment  from './comment'

【讨论】：

是的，它确实有帮助！有趣的是，eslint 没有发现丢失的导入。【参考方案3】：

您不能通过 Comment() 调用 React 组件 &lt;Comment/&gt;。该错误要求您创建Comment 类的实例，即类似var comment = new Comment() 的东西。但是，在您的问题中，我们不需要这个。

<body>
  <a href="javascript:RenderComment();">News</a>
  <div id="content"> </div>
</body>

您的 React 组件 &lt;Comment/&gt; 应该是独立的，并将用作 ReactDOM.render(...) 的参数。因此 Comment 内部不应有 ReactDOM.render(...) 函数。此外，锚元素 click 不能调用 Comment()，因为它不是一个执行渲染的函数，而是一个 Class，其 instance 安装在 DOM 上。单击&lt;a/&gt; 标记时，应调用RenderComment()，这将依次渲染&lt;Comment/&gt; 组件。

var RenderComment = function RenderComment() 
  ReactDOM.render(React.createElement(
                    "div", null, " ", Comment, " "
                  ), document.getElementById("content"));
;

在这里，我们正在渲染您使用 React.createClass 定义的 &lt;Comment/&gt; 组件。

var Comment = React.createClass(
 // Your component functions and render() method
 // No ReactDOM.render() method here

【讨论】：

1) 所以 RenderComment 是一个普通的 JS 函数，对吧？如果是这样，我可以像这个函数 RenderComment() ReactDOM.render( Comment , document.getElementById("content")); 2) 还有为什么 Comment? 是的 RenderComment() 是一个普通的 JS 函数。事实上，要渲染 React，总是需要像这样的普通 JS 函数。通常在文档加载时完成。在您的情况下，它是通过单击按钮完成的。这是唯一的区别。 我得到 VM233:1 Uncaught ReferenceError: RenderComment is not defined(anonymous function) @ VM233:1 也请回答这个问题 2) 还有为什么 Comment? 从 而不是 "text/babel" 中调用 ReactDOM.render(...) 函数

以上是关于对于 React JS，如何解决“未捕获的 TypeError：无法构造 'Comment'：请使用 'new' 操作.....”？的主要内容，如果未能解决你的问题，请参考以下文章

如何解决 redux-persist 创建同步存储失败。回退到 React.js 中的 noop 存储

react.js学习之路一

如何解决使用redux的react js中的401错误。？

React.js：如何在点击时附加组件？

React js Cors policy 与 axios api 的问题在 localhost 如何解决？

如何在（Ionic + React.js App）中自动聚焦 IonInput/OtpInput 字段，我已经尝试了所有解决方案