我有一个home.jsp,在body 中
<body>
<script type="text/babel" src="../resources/scripts/example.js"></script>
<a href="javascript:Comment();">News</a>
</body>
在另一个例子.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标记。
如何解决此问题?请帮帮我。
也许这会帮助和我有同样问题的人……我只是忘记导入我试图渲染的组件:
import { Comment } from './comment'
您不能通过Comment()
调用React Component <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(...)
函数。此外,锚点元素click不能调用Comment()
,因为它不是一个进行渲染的函数,而是一个Class
,其instance
安装在DOM
上。单击<a/>
标记时,应调用RenderComment()
,它将依次渲染<Comment/>
组件。
var RenderComment = function RenderComment() {
ReactDOM.render(React.createElement(
"div", null, " ", Comment, " "
), document.getElementById("content"));
};
在这里,我们将呈现您使用React.createClass
定义的<Comment/>
组件。
var Comment = React.createClass({
// Your component functions and render() method
// No ReactDOM.render() method here
}
同意Troy Carlson的上述答复。我在React原生项目中遇到了类似的问题。我在里面使用了一些内置组件(React native),但没有导入。在正确导入所有组件后,错误消失了
import {
FlatList,
SafeAreaView,
Text,
View,
...
} from "react-native";