是否可以在Blazor页面中呈现React组件?我尝试将脚本标签添加到Blazor页面,但是Blazor不允许添加脚本标签。
谢谢答案。
在 Blazor 页面中渲染 React 组件是可能的。React 是一个 JavaScript 库,你可以像将 jQuery 添加到 Blazor 应用程序一样添加 React,但它也有一些缺点。
我尝试在 Blazor 页面中添加脚本标签,但 Blazor 不允许添加脚本标签。
确实,在 .razor
文件中不能添加脚本标签,你应该将脚本标签添加到 _Host.cshtml
文件中。
现在你可能会问,如何将 React 添加到 Blazor 应用程序中?嗯... 这有点复杂。
你需要做的是配置 webpack 以生成来自 React 的所有文件并将其放置在 wwwroot
中,并在 _Host.cshtml
文件中引用所有的脚本和链接。
然后你需要将一个函数附加到 window
,该函数将呈现你的 React 组件,类似于:
// index.js from react
window.renderReactApp = function() {
ReactDOM.render(<App />, document.getElementById("react-div"))
}
如果需要在 React 和 Blazor 之间传递数据(状态),那将是一个很大的挑战,您需要创建某种 Flux 模式,作为两者之间的桥梁。这需要一定的时间来完成,并且使用起来可能会让人感到困惑。
如果您已经在使用 Blazor 并想要添加 React,则需要有非常强烈的理由才能这样做。否则,您将浪费太多时间在可以通过更少的精力在 Blazor 中完成的工作上。
有许多 JavaScript 库可能无法使用 Blazor 创建,或者即使有人这样做了,也可能只是 JavaScript 的包装器...
到目前为止,Blazor 没有提供任何方法可以执行 webpack 那样的操作,因此在某些情况下,如果您有大量 JavaScript 或 CSS,则可以配置 webpack 来压缩 / 处理这些文件。在这种情况下,如果您已经为此配置 webpack,则将 React 添加到其中将不成问题。
其中一个例子是MatBlazor。他们使用了许多来自 Material Design Web 组件的 JavaScript 和 CSS,因此他们使用webpack将所有内容打包起来。虽然他们没有使用 React,但这是在 Blazor 中使用 webpack 的示例(如果要在 Blazor 应用中使用 React,则需要完成这个操作)。