是否可以在 Blazor 页面内呈现 React 组件?
是的,这是可能的。 React 是一个 javascript 库,就像您可以将 jquery 添加到 blazor 应用程序一样,您也可以向其中添加 React,但它有一些缺点。
我尝试向 Blazor 页面添加脚本标签,但 Blazor 不允许添加脚本标签。
事实上,你不能在 a 中添加 script 标签.razor
文件,您应该添加的位置在_Host.cshtml
file
现在您可能会问,如何将 React 添加到 Blazor 应用程序?嗯..有点复杂。
你需要做的是配置一个 webpack 以从 React 生成所有文件,然后放入wwwroot
并引用中的所有脚本和链接_Host.cshtml
file.
然后你需要附加到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 就没有问题了。
其中一个例子是马特·布拉佐 https://github.com/SamProf/MatBlazor。他们使用了材料设计 Web 组件中的大量 js 和 css,因此他们使用webpack https://github.com/SamProf/MatBlazor/tree/master/src/MatBlazor.Web把所有东西都捆绑起来。他们不使用 React,但它是如何在 blazor 中使用 webpack 的示例(您需要执行此操作才能在 blazor 应用程序中使用 React)