javascript 如何解决关于 React JS 的“未捕获的类型错误：无法构造‘评论’：请使用‘新’操作......”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34328227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resolve "Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat....." with respect to React JS?
提问by sofs1
I have a home.jsp where within body
我有一个 home.jsp 在体内
<body>
<script type="text/babel" src="../resources/scripts/example.js"></script>
<a href="javascript:Comment();">News</a>
</body>
In a separate example.js, I have the following
在单独的 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')
);
I am getting the following error in Chrome console.
我在 Chrome 控制台中收到以下错误。
Uncaught TypeError: Failed to construct 'Comment': Please use the 'new'
operator, this DOM object constructor cannot be called as a function.
I have added React js tags in home.jsp file.
我在 home.jsp 文件中添加了 React js 标签。
How to fix this? Please help me.
如何解决这个问题？请帮我。
回答by Troy Carlson
Maybe this will help someone who had the same issue as me...I simply forgot to import the component I was trying to render (using ES6):
也许这会帮助那些和我有同样问题的人......我只是忘记导入我试图渲染的组件（使用 ES6）：
import { Comment } from './comment'
回答by Naisheel Verdhan
You cannot call React Component <Comment/>by Comment(). The error requests you to create an instance of the Commentclass i.e. something like this var comment = new Comment(). However, in your problem we do not need this.
你无法做出响应的组件<Comment/>通过Comment()。该错误要求您创建Comment类的一个实例，即类似这样的内容var comment = new Comment()。但是，在您的问题中，我们不需要这个。
<body>
<a href="javascript:RenderComment();">News</a>
<div id="content"> </div>
</body>
Your React Component <Comment/>should be independent and will be used as an argument to ReactDOM.render(...). Hence the Commentshould not have ReactDOM.render(...)function inside it. Also, the anchor element click must not call Comment()as it is not a function which does rendering but rather a Classwhose instanceis mounted on the DOM. On clicking the <a/>tag, a RenderComment()should be called which will in turn render the <Comment/>component.
你的 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"));
};
Here, we are rendering your <Comment/>component which you defined using React.createClass.
在这里，我们正在渲染您<Comment/>使用React.createClass.
var Comment = React.createClass({
// Your component functions and render() method
// No ReactDOM.render() method here
}
