在Blazor页面内渲染react组件

Question

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

感谢您的回答。

Answer 1

是否可以在Blazor页面中渲染react组件？

是的，有可能。 React是一个javascript库，您可以像在blazor应用中添加jquery一样，也可以向其添加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的充分理由

Blazor可能无法创建很多js库，或者如果有人这样做，可能只是js的包装，而...

到目前为止，Blazor并没有为您提供做webpack可以做的事情的任何方式，因此在某些情况下，如果您有很多javascript或css，您将需要配置一个webpack来缩小/做您要做的事情需要这些文件。在这种情况下，如果您已经为此配置了Webpack，则对其进行响应就不会有问题。

一个示例是MatBlazor。他们使用了大量来自材料设计Web组件的js和CSS，因此他们使用webpack将所有内容捆绑在一起。他们不使用React，但这是如何在blazor中使用webpack的示例（需要做一些事情才能在blazor应用程序中使用React）