Javascript 为什么下面的代码抛出“uncaughttypeerror:inst.render不是函数”,而我正在使用React JS?
错误未捕获类型错误:inst.render不是指向行号的函数Javascript 为什么下面的代码抛出“uncaughttypeerror:inst.render不是函数”,而我正在使用React JS?,javascript,jquery,ajax,reactjs,Javascript,Jquery,Ajax,Reactjs,错误未捕获类型错误:inst.render不是指向行号的函数 function RenderComment(){ alert("Clicked"); ReactDOM.render(React.createElement("div", {}, React.createElement(Comment,{})), //the error points to this line doc
function RenderComment(){
alert("Clicked");
ReactDOM.render(React.createElement("div", {}, React.createElement(Comment,{})), //the error points to this line
document.getElementById('content')
);
}
我也收到了一个警告
警告:注释…:在返回的组件实例上找不到呈现方法:您可能忘记定义呈现、从无状态组件返回null/false,或者试图呈现类型为非React组件的函数的元素
我的整个代码
<script type="text/babel">
var CommentBox = React.createClass({
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
var initializeScroll = 0;
loadCommentsFromServer: function() {
initializeScroll = initializeScroll + 5;
var data = {
"count": initializeScroll
};
$.ajax({
url: this.props.url,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: JSON.stringify(data),
cache: false,
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
success: function(result) {
this.setState({
data: this.state.data.concat(result)
});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
window.addEventListener("scroll", this.handleScroll);
return {
loadingFlag: false,
data: []
};
},
componentDidMount: function() {
this.loadCommentsFromServer();
},
handleScroll: function(e) {
//this function will be triggered if user scrolls
var windowHeight = $(window).height();
var inHeight = window.innerHeight;
var scrollT = $(window).scrollTop();
var totalScrolled = scrollT + inHeight;
alert("Heeeeey");
if (totalScrolled + 100 > windowHeight) { //user reached at bottom
if (!this.state.loadingFlag) { //to avoid multiple request
this.setState({
loadingFlag: true,
});
loading("on");
this.loadCommentsFromServer();
}
}
},
render: function() {
return ( < div className = "commentBox" >
< CommentList data = {
this.state.data
}
/> < /div>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return ( < Comment > {
comment
} < /Comment>
);
});
return ( < div className = "commentList" > {
commentNodes
} < /div>);
}
});
var Comment = React.createClass({
rawMarkup: function() {
var rawMarkup = marked(this.props.children.toString(), {
sanitize: true
});
return {
__html: rawMarkup
};
},
render: function() {
return ( < div className = "comment" >
< span dangerouslySetInnerHTML = {
this.rawMarkup()
}
/> < /div>
)
}
});
ReactDOM.render( < CommentBox url = "/myUrl/abcd" / > ,
document.getElementById('content')
);
<script>
我想做的是,滚动一个网页无限滚动并从服务器加载内容——AJAX+JQuery for infinite scroll+React JS。
请帮帮我。我花了整个周末 这些var标记=$meta[name=''u csrf'].attrcontent;行不是有效的代码。对象中不能有这样的声明。你能试着在某个地方建立一个在线示例吗?更容易调试。另外,考虑一下捆绑你个人开发的集束器。Webpack很受用户欢迎。您还可以在附近找到基于Browserify的设置。