是否可以在Blazor页面中呈现react组件?我尝试向Blazor页面添加脚本标记,但Blazor不允许添加脚本标记。
谢谢你的回答。
是否可以在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"))
}
在blazor应用程序中添加React的缺点
1。React和Blazor之间的通信
如果你需要在React和Blazor之间传递数据(状态(,这将是一场巨大的斗争,你需要创建某种Flux模式,作为两者之间的桥梁。这需要时间,而且使用它可能会令人困惑。
2。为你可能用Blazor做的事情付出了太多的努力
如果你已经在使用Blazor并想添加React,那么你需要有充分的理由这样做。否则,你将不会在Blazor 中花太多时间做一些本可以毫不费力的事情
将React添加到Blazor的充分理由
有很多js库可能无法使用Blazor创建,或者如果有人这样做,可能只是js和。。。
到目前为止,Blazor没有为你提供任何方式来做webpack可以做的事情,所以在某些情况下,如果你有很多javascript或css,你会想配置一个webpack来缩小/做你需要的那些文件。在这种情况下,如果您已经为此配置了webpack,那么向其添加react将不会有问题。
MatBlazor就是一个例子。他们使用了大量来自材料设计web组件的js和css,所以他们使用webpack来捆绑所有内容。他们不使用React,但这是如何在blazor中使用webpack的一个例子(你需要做一些事情才能在你的blazor应用程序中使用React(