4

我一直在尝试使用 ReactJS.Net 在 MVC 项目中运行Flux Todo List Tutorial 。

我正在使用 Gulp 和 Browserify 来捆绑文件，然后调用以在我的视图中呈现 React 组件。gulpfile.js的相关部分：

gulp.task('build', function(){
  browserify({
    entries: [path.ENTRY_POINT],
    transform: [reactify]
  })
    .bundle()
    .pipe(source(path.NON_MINIFIED_OUT))
    .pipe(gulp.dest(path.DEST_BUILD));
});

我已更改App.js文件以全局定义我的组件：

global.React = require('react');

global.TodoApp = require('./components/TodoApp.react');

我试图在我看来像这样使用：

<div id="app">
    @Html.React("TodoApp", new {})
</div>

<script src="http://fb.me/react-0.13.3.min.js"></script>
@Scripts.Render("~/bundles/reactApp")
@Html.ReactInitJavaScript()

但它在运行时抛出以下错误：

找不到名为“TodoApp”的组件。您是否忘记将其添加到 App_Start\ReactConfig.cs？

我已将 Browserify 的输出添加到我的ReactConfig.cs：

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/dist/build.js"); // Have also tried .AddScriptWithoutTransform
}

但这似乎没有帮助。

如果我只是在客户端渲染它工作正常：

<div id="app">
</div>

@Scripts.Render("~/bundles/reactApp")
<script>
    React.render(
        React.createElement(TodoApp, null),
        document.getElementById('app')
    );
</script>
4

2 回答 2

1

看看这个博客：

http://janekk.github.io/tech/2014/07/25/aspnet-mvc-reactjs-browserify.html

这里是 ReactJs.Net、Gulp 和 Browserify 的一个很好的例子：

https://github.com/Janekk/ReactDotNetBrowserify

希望能帮助到你 ：）

于 2015-11-23T09:07:16.150 回答
0

默认情况下，Browserify 不会公开您的捆绑对象，因此 TodoApp 对象不存在。您需要通过 browserify require公开/导出 TodoApp ，然后在浏览器中使用 TodoApp 之前需要它。

服务器也需要暴露在全局空间中的组件。我最终使用了类似于以下内容的东西：

gulp.task("bundle", function () {
    var exposure = new Readable();
    var b = browserify({
        transform: babelify
    });

    exposure.push('var React = require("react");\n');

    b.require(paths.components + "/Component1.jsx", { expose: 'Component1' });
    exposure.push('var Component1 = require("Component1");\n');

    b.require(paths.components + "/Component2.jsx", { expose: 'Component2' });
    exposure.push('var Component2 = require("Component2");\n');

    exposure.push(null);

    b.require("react");
    new StreamQueue()
        .queue(b.bundle()).queue(exposure)
        .pipe(source("bundle.js"))
        .pipe(gulp.dest(paths.componentJsDest));

});
于 2015-09-30T14:32:30.560 回答