时间戳

首页 > 解决方案 > 在 Blazor 页面中渲染反应组件

c# - 在 Blazor 页面中渲染反应组件

问题描述

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

感谢你的回答。

标签： c#asp.netreactjsrazorblazor

解决方案

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

是的，这是可能的。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）

推荐阅读