如何解决关于 React JS 的“未捕获的类型错误：无法构造‘评论’：请使用‘新’操作......”？

IT技术 javascript html reactjs react-native
2021-05-03 16:41:33

我有一个 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 标签。

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

3个回答

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

import { Comment } from './comment'

你无法做出响应的组件<Comment/>通过Comment()。该错误要求您创建Comment类的一个实例，即类似这样的内容var comment = new Comment()。但是，在您的问题中，我们不需要这个。

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

你的 React 组件<Comment/>应该是独立的，并将用作ReactDOM.render(...). 因此，里面Comment不应该有ReactDOM.render(...)函数。此外，锚元素点击不能调用Comment()，因为它不是一个函数，它不渲染而是Class其instance安装在DOM。单击<a/>标签时，RenderComment()应调用 a ，这将依次呈现<Comment/>组件。

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

在这里，我们正在渲染您<Comment/>使用React.createClass.

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

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

import {
    FlatList,
    SafeAreaView,
    Text,
    View,
    ...
    } from "react-native";
其它你可能感兴趣的问题
上一篇如何在 React Native 中复用 React JS 组件 下一篇如何初始化 React Native 项目