在 Blazor 页面内渲染反应组件 [英] Render react component inside Blazor page

问题描述

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

Is it possible to render a react component inside a Blazor page? I tried adding script tags to the Blazor page, but Blazor does not allow adding script tags.

感谢您的回答.

推荐答案

是否可以在 Blazor 页面内呈现 React 组件?

Is it possible to render a react component inside a Blazor page?

是的，这是可能的.React 是一个 javascript 库，与您可以将 jquery 添加到 blazor 应用程序的方式相同，您也可以将 React 添加到其中，但它有一些缺点.

Yes, it's possible. React is a javascript library and the same way you can add jquery to your blazor app, you can also add React to it, but it have some drawbacks.

我尝试向 Blazor 页面添加脚本标签，但 Blazor 不允许添加脚本标签.

I tried adding script tags to the Blazor page, but Blazor does not allow adding script tags.

确实，您不能在 .razor 文件中添加脚本标记，而您应该添加的位置在 _Host.cshtml 文件中

Indeed, you can't add script tag in a .razor file and the place you should add is in the _Host.cshtml file

现在您可能会问，如何将 React 添加到 Blazor 应用程序?嗯..有点复杂.

Now you may ask, how to add React to a Blazor app? Well.. it's a little complicated.

您需要做的是配置一个 webpack 以从 React 生成所有文件，然后放入 wwwroot 并引用 _Host.cshtml 文件中的所有脚本和链接.

What you need to do is configure a webpack to generate all files from React and put then in wwwroot and reference all the scripts and links in the _Host.cshtml file.

然后你需要在 window 上附加一个函数来渲染你的 React 组件，比如

And then you will need to attach to window a function that will render you react component, something like

// index.js from react
window.renderReactApp = function() {
    ReactDOM.render(<App />, document.getElementById("react-div"))
}

将 React 添加到 blazor 应用程序的缺点

1. React 和 Blazor 之间的通信.

如果你需要在 React 和 Blazor 之间传递数据(状态)，这将是一场大斗争，你需要创建某种 Flux 模式，作为两者之间的桥梁.这需要时间来完成并且使用它可能会令人困惑.

Drawbacks of adding React into a blazor app

1. Communicating between React and Blazor.

If you need to pass data (state) between React and Blazor, it will be a big struggle, you will need to create some sort of Flux pattern that will be the bridge between both. This takes time to do and using it can be confusing.

如果您已经在使用 Blazor 并想添加 React，那么您需要有非常充分的理由这样做.否则，您会在一些本可以在 Blazor 中轻松完成的事情上浪费太多时间

If you are already using Blazor and want to add React, you need to have really strong reasons to do that. Otherwise, you will wast too much time on something that you could have done with less effort in Blazor

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

There is a lot of js libraries that probably won't be able to be created with Blazor, or if someone do it, probably will be just a wrapper of the js and...

到目前为止，Blazor 没有给你任何方式来做 webpack 可以做的事情，所以在某些情况下，你有很多 javascript 或 css，你会想要配置一个 webpack 来缩小/做你想做的事需要这些文件.在这种情况下，如果您已经为此配置了 webpack，添加 react 就没有问题了.

So far, Blazor doesn't give any way for you to do things that webpack can do, so in some cases where you have a lot of javascript or css, you will want to configure a webpack to minify / do what you need with those files. In this case, if you are already configuring the webpack for that, adding react to it, will be no problem.

其中一个例子是 MatBlazor.他们使用了大量来自 Material Design Web 组件的 js 和 css，因此他们使用 webpack 把所有东西都打包起来.他们不使用 React，但它是如何在 blazor 中使用 webpack 的示例(您需要做一些事情才能在 blazor 应用程序中使用 React)

One example of this is MatBlazor. They use a lot of js and css from material design web components, so they use webpack to bundle everything up. They don't use React, but it's an example of how to use webpack in blazor (something you will need to do to have React in your blazor app)

这篇关于在 Blazor 页面内渲染反应组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！