Question

按照教程here，我已经设法让webpack为我做捆绑，它正在服务器端进行预渲染，例如：

@Html.React("Components.myComponent",
             New With {
                 .initialData = Nothing
             })

@Html.ReactInitJavaScript()

这是在浏览器中正确显示我的组件，但是一旦客户端接管我就会收到错误'ReactDOM' is undefined

我使用react-dom安装了npm install react-dom --save-dev 我尝试require ReactDOM，首先在包含我的组件的.jsx文件中，然后在webpack构建的client.js文件中：

//myComponent.jsx
var React = require('react');
var ReactDOM = require('react-dom');

或

//client.js
var ReactDOM = require('react-dom');
var Components = require('expose?Components!./src');

但我仍然遇到同样的错误。

如果我将react和react-dom脚本直接添加到我的webpack编译客户端javascript之上，那么问题就会消失：

//index.html
<script src="https://www.facebook.com/react-0.14.0.min.js"></script>
<script src="https://www.facebook.com//react-dom-0.14.0.min.js"></script>
<script src="~/Scripts/webpack/build/client.bundle.js"></script>

那么我怎样才能让webpack在客户端包中正确包含这些脚本？

修改

我的externals中确实有以下webpack.config.js，但删除它们似乎没有任何区别。

externals: {
    // Use external version of React (from CDN for client-side, or
    // bundled with ReactJS.NET for server-side)
    react: 'React'
}

我想，外部存在，所以你可以使用基于CDN的脚本，所以也许我过分思考这个并且应该在我的视图中留下基于CDN的反应脚本？

Answer 1

您应该在react-dom中全局公开client.js，因此可以在ReactDOM变量的浏览器中使用它来呈现客户端：

require("expose?ReactDOM!react-dom");

React.NET，Webpack - 'ReactDOM'未定义（客户端）

1 个答案: