【问题标题】：Render react component inside Blazor page在 Blazor 页面中渲染反应组件
【发布时间】：2020-08-12 16:24:24
【问题描述】：

是否可以在 Blazor 页面中呈现 React 组件？我尝试将脚本标签添加到 Blazor 页面，但 Blazor 不允许添加脚本标签。

感谢您的回答。

【问题讨论】：

你为什么不简单地用 Blazor 代码重写你的 React 组件？
您不能在 .razor 文件中编写 JavaScript 代码。但您可以调用 javascript 函数。无论如何我认为在 blazor 代码中添加 react 组件是不合理的！

标签： c# asp.net reactjs razor blazor

【解决方案1】：

是否可以在 Blazor 页面中呈现 React 组件？

是的，这是可能的。 React 是一个 javascript 库，就像您可以将 jquery 添加到您的 blazor 应用程序一样，您也可以向其中添加 React，但它有一些缺点。

我尝试将脚本标签添加到 Blazor 页面，但 Blazor 不允许添加脚本标签。

确实，您不能在.razor 文件中添加脚本标签，您应该添加的位置是在_Host.cshtml 文件中

现在您可能会问，如何将 React 添加到 Blazor 应用程序？嗯..有点复杂。

您需要做的是配置一个 webpack 以从 React 生成所有文件，然后放入 wwwroot 并引用 _Host.cshtml 文件中的所有脚本和链接。

然后您需要附加到window 一个函数，该函数将呈现您的反应组件，类似于

// index.js from react
window.renderReactApp = function() {
    ReactDOM.render(<App />, document.getElementById("react-div"))
}

将 React 添加到 blazor 应用程序的缺点

1. React 和 Blazor 之间的通信。

如果您需要在 React 和 Blazor 之间传递数据（状态），这将是一个很大的难题，您需要创建某种 Flux 模式来作为两者之间的桥梁。这需要时间来完成，并且使用它可能会令人困惑。

2. 用 Blazor 做的事情花费了太多精力

如果您已经在使用 Blazor 并且想要添加 React，那么您需要有充分的理由这样做。否则，您将在 Blazor 中不费吹灰之力就能完成的事情上浪费太多时间

将 React 添加到 Blazor 的充分理由

有很多 js 库可能无法使用 Blazor 创建，或者如果有人这样做，可能只是 js 的包装器......

到目前为止，Blazor 并没有让你做 webpack 可以做的事情，所以在某些情况下你有很多 javascript 或 css，你会想要配置一个 webpack 来缩小/做你想做的事需要这些文件。在这种情况下，如果你已经为此配置了 webpack，那么添加 react 就没有问题了。

MatBlazor 就是一个例子。他们使用大量来自 Material Design Web 组件的 js 和 css，因此他们使用webpack 将所有内容捆绑在一起。他们不使用 React，但它是如何在 blazor 中使用 webpack 的示例（您需要在 blazor 应用程序中使用 React）

【讨论】：

感谢您冗长而详细的回答。感谢您的代码 sn-p，我设法渲染了我的反应组件。现在我使用会话存储进行通信（我只需要传递1个令牌），但我意识到它也可以通过一个参数来完成。
我没有使用webpack（只是将生产代码复制到wwwroot）。