在 Blazor 页面内渲染 React 组件

2024-01-03

是否可以在 Blazor 页面内呈现 React 组件?我尝试向 Blazor 页面添加脚本标签,但 Blazor 不允许添加脚本标签。

感谢你的回答。


是否可以在 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)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Blazor 页面内渲染 React 组件 的相关文章

随机推荐