Question

我在http://reactjs.net/getting-started/tutorial.html上做了评论教程，并使用.net mvc来渲染服务器端。

我有一个现有的mvc应用程序，我在其中重写了一个页面。我试图使用.net渲染服务器端，但是当它尝试渲染服务器端时我收到错误。

Exception Details: React.Exceptions.ReactServerRenderingException: Error while rendering "TopicAnswers" to "react1": TypeError: undefined is not a function
   at React.createClass.render (Script Document [8]:80:39) ->     var answerNodes = this.props.data.map(function(answer){
   at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (Script Document [2]:7395:34)

以下是代码：

在我的MVC视图中：

@Html.React("TopicAnswers", new
{
    initialAnswers = Model,
    url = Url.Action("TopicAnswers", new { id = ViewBag.TopicID }),
})

My TopicAnswers.jsx文件：

var TopicAnswers = React.createClass({
    getInitialState: function(){
    alert('inside getInitialState: ' + this.props.initialAnswers);       
    return {answers: this.props.initialAnswers};
}

我的ReactConfig.cs文件：

ReactSiteConfiguration.Configuration
                .AddScript("~/Scripts/internal/eusVote/TopicAnswers.jsx");

问题：为什么渲染反应文件服务器端时出现问题？

Answer 1

我收到此错误消息，尝试使用.net：

呈现React jsx文件服务器端

“React.Exceptions.ReactServerRenderingException：将”TopicAnswers“呈现为”react1“时出错：TypeError：undefined不是函数”

我的问题是在JSX文件中，我仍然使用ComponentWillMount调用loadAnswersFromServer。如果您正在渲染客户端，那么这就是您所需要的。但是，一旦调整代码以呈现服务器端，就需要注释掉/删除ComponentWillMount，以便它不会尝试在服务器端运行loadAnswersFromServer函数。

使用MVC，数据应该从控制器传递到视图，并在@ Html.Render（“Comment”，new {initialData = Model}）中引用以进行初始加载。

另外，不要忘记注释掉/删除JSX文件中的React.render（...）行。

Answer 2

alert仅在浏览器窗口上下文中可用。在服务器上呈现它时，您无法调用任何与浏览器相关的函数。如果您正在呼叫它们，那么您需要对它们进行填充，以便它们不会在服务器上发生故障。

使用.net

2 个答案: