我家里有一个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标记。
如何解决这个问题?请帮帮我。
答案 0 :(得分:11)
也许这会帮助那些和我有同样问题的人...我只是忘了导入我试图渲染的组件(Webpack / Babel / ES6开发环境):
services.AddTransient<IPersistedGrantStore, PersistedGrantStore>();
答案 1 :(得分:10)
您无法通过<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(...)
函数。此外,锚点元素点击不得调用Comment()
,因为它不是一个执行渲染的函数,而是一个Class
instance
安装在DOM
上的函数。点击<a/>
代码后,应调用RenderComment()
,然后再呈现<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
}
答案 2 :(得分:0)
同意上述特洛伊卡尔森的回答。我在 React Native 项目中遇到了类似的问题。我在里面使用了很少的内置组件(React native),但没有导入它。全部正确导入后,错误消失
import {
FlatList,
SafeAreaView,
Text,
View,
...
} from "react-native";