问题:我正在使用本教程来学习React.js。我已将showdown.js文件正确添加到项目中,并证明它已作为脚本文件加载到客户端浏览器中。页面加载时,我在控制台上看到标题中列出的错误。
环境: MVC 4/5,Reactjs.NET
JSX文件如下所示:
var Comment = React.createClass({
render: function() {
var converter = new Showdown.converter(); <-- Error is here
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{converter.makeHtml(this.props.children.toString())}
</div>
);
}
});
var CommentList = React.createClass({
render: function () {
return (
<div className="commentList">
<Comment author="Daniel Lo Nigro">Hello ReactJS.NET World!</Comment>
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function () {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function () {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
证明showdown.js文件已发送到客户端Chrome浏览器:
在JSX文件中证明语法正确
引发异常的代码行是:
var converter = new Showdown.converter();
问题如何获得Showdown.convertor的新实例?
简的上述建议是正确的。这是解决此问题的原因:
<body>
<div id="content"></div>
<script src="https://fb.me/react-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="@Url.Content(" ~/Scripts/showdown.min.js ")"></script>
<script src="@Url.Content(" ~/Scripts/Tutorial.jsx ")"></script>
</body>
注意showdown.js必须在jsx文件之前。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句