我正在使用 ReactJS.NET 构建提要，但遇到了 chrome 给我的错误问题。
加载页面时我可以看到 1 个错误
Uncaught ReferenceError: FeedBox is not defined (anonymous function)
它从 React.render 行抛出:
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/spin.min.js"></script>
<script type="text/jsx" src="/Scripts/JSXTransformer.js"></script>
<script>React.render(React.createElement(FeedBox, {"controlId":"myFeedBox","initialData":{"TopicList":[{"Id":null,"UserInfoUrl":"http://www.bradspel.net","UserName":"Carl","UserPicSrc":"http://www.bradspel.net/tools/avatars/15_avatar.jpg","LikeCount":487,"Like":false,"CommentCount":3,"DateCreated":"2015-02-22 19:42:59","DateEdit":"2015-02-22 19:42:59","Message":"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus","Comments":[{"Id":null,"UserInfoUrl":"http://www.bradspel.net","UserName":"Carl","UserPicSrc":"http://www.bradspel.net/tools/avatars/15_avatar.jpg","LikeCount":56,"Like":false,"CommentCount":3,"DateCreated":"2015-02-22 19:42:59","DateEdit":"2015-02-22 19:42:59","Message":"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus","Comments":[]}]}],"UserId":5},"pageNr":1,"pageTake":25,"maxPageNr":0}), document.getElementById("react1"));
</script>
然而，组件 FeedBox 正确呈现，但 onClick 不起作用。
索引看起来像这样:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section MainContainer
{
<h2>Index</h2>
@Html.React("FeedBox", new
{
controlId = "myFeedBox",
initialData = Model.FeedModel,
pageNr = 1,
pageTake = 25,
maxPageNr = 0
})
}
Feed.jsx
var LikeCon = React.createClass({
handleClick: function(like) {
alert("like : " + like);
},
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount, this.props.userId)
},
renderLikeButton(like, likeCount, userId){
return (
content =
<div className="likeCon">
<div className={like==true ? "likeButConAct" : "likeButCon"}>
<div className="likeB" onClick={this.handleClick.bind(this,!like)} >
</div>
{ likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null}
</div>
</div>
);
}
});
var TopicComments = React.createClass({
render: function() {
var comment = this.props.data.map(function(com, i) {
return (
<article>
<div className="comment">
<div className="tUImgLnk">
<a title={com.UserName} target="_blank" href={com.UserInfoUrl}>
<img className="tUImg" src={com.UserPicSrc} />
</a>
</div>
<a href="#" target="_blank">{com.UserName}</a>
<div className="content">
{com.Message}
</div>
<div className="status">
<div className="dateCreated dimText">
{com.DateCreated}
</div>
<LikeCon like={com.Like} likeCount={com.LikeCount} objectId={com.Id} categoryKey={1} userId={this.props.userId} />
<article></article>
</div>
</div>
</article>);
}.bind(this));
return(
<div className="comments">
{comment}
</div>
);
}
});
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = this.refs.author.getDOMNode().value.trim();
var text = this.refs.text.getDOMNode().value.trim();
if (!text || !author) {
return;
}
this.props.onCommentSubmit({Author: author, Text: text});
this.refs.author.getDOMNode().value = '';
this.refs.text.getDOMNode().value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" />
</form>
);
}
})
var FeedTopic = React.createClass({
render: function() {
return (
<div className="topic">
<div className="tBack">
<div className="tHead">
<div className="tUImgLnk">
<a title={this.props.data.UserName} target="_blank" href={this.props.data.UserInfoUrl}>
<img className="tUImg" src={this.props.data.UserPicSrc} />
</a>
</div>
<div className="tInfo">
<h4 className="nLnSpc margB3p"><a title={this.props.data.UserName} target="_blank" href={this.props.data.UserInfoUrl}>{this.props.data.UserName}</a></h4>
<span className="dimText" >{this.props.data.DateCreated}</span>
</div>
</div>
<article></article>
<div className="tContent">
{this.props.data.Message}
</div>
<LikeCon like={this.props.data.Like} likeCount={this.props.data.LikeCount} userId={this.props.userId} />
<article></article>
</div>
<TopicComments data={this.props.data.Comments} userId={this.props.userId} />
<CommentForm />
</div>
);
}
});
var FeedList = React.createClass({
render: function() {
var userId = this.props.data.UserId;
var controlId = this.props.controlId;
if(this.props.data.TopicList != null && this.props.data.TopicList.length > 0){
var topic = this.props.data.TopicList.map(function (topic, i) {
return (
<FeedTopic data={topic} key={i} userId={this.props.data.UserId} />
);
}.bind(this));
}
return (
<div className={controlId}>
{topic}
</div>
);
}
});
var FeedBox = React.createClass({
getInitialState: function() {
return { data: this.props.initialData };
},
render: function(){
return (
<FeedList data={this.state.data} controlId={this.props.controlId} />
);
}
});
_布局
@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title - Bradspel.net</title>
@Styles.Render("~/Content/css")
@RenderSection("Header", required: false)
</head>
<body>
<div id="header">
@RenderBody()
</div>
<div id="mainContent">
<div id="page">
@RenderSection("MainContainer")
</div>
</div>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/spin.min.js")"></script>
<script type="text/jsx" src="@Url.Content("~/Scripts/JSXTransformer.js")"></script>
@Html.ReactInitJavaScript()
</body>
</html>
react 配置
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/Grid.jsx")
.AddScript("~/Scripts/Feed.jsx");
}
}
最佳答案
您不需要将 JSXTransformer 客户端与 ReactJS.NET 一起使用。所有 JSX 转换都在服务器端完成，因此您可以删除 JSXTransformer 脚本。
这里的问题是您没有在 HTML 中引用 JSX 文件。 ReactConfig.cs 中列出的文件仅用于服务器端渲染。对于客户端渲染，你仍然需要添加一个 <script>这些文件的标签。这不会自动完成，因为不同的人使用不同的配置(例如，不同的缩小器)。您可以直接引用 JSX 文件； ReactJS.NET 会将它们转换为 JavaScript 并即时缓存它们:
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script>
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script>
这有利于开发，但对于生产站点，您可能需要使用像 Cassette 这样的 bundler /压缩器。或 ASP.NET Bundling and Minification (它们都是 .NET 的原生工具)，或者 Webpack 或 Gulp(它们是 Node.js 工具)。关于 the ReactJS.NET site 的文档包含有关如何配置所有这些工具的页面。
关于html - ReactJS 组件抛出未定义但已呈现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28661821/