在 Blazor 页面内渲染 React 组件

Question

在 Blazor 页面内渲染 React 组件

c#asp.netreactjsrazorblazor

9

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

谢谢答案。

- Kristof

3

为什么不直接用 Blazor 代码重写你的 React 组件？ - Quentin Grisel

1

你不能在 .razor 文件中编写 JavaScript 代码，但是你可以调用 JavaScript 函数。不过我认为在 Blazor 代码中添加 React 组件是不合理的！ - Ali Borjian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vencovsky · Accepted Answer

在 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"))
}

在 Blazor 应用中添加 React 的缺点

1. React 和 Blazor 之间的通信问题

如果需要在 React 和 Blazor 之间传递数据（状态），那将是一个很大的挑战，您需要创建某种 Flux 模式，作为两者之间的桥梁。这需要一定的时间来完成，并且使用起来可能会让人感到困惑。

2. 尝试花费太多精力去做 Blazor 已经可以完成的事情

如果您已经在使用 Blazor 并想要添加 React，则需要有非常强烈的理由才能这样做。否则，您将浪费太多时间在可以通过更少的精力在 Blazor 中完成的工作上。

在 Blazor 中添加 React 的好处

有许多 JavaScript 库可能无法使用 Blazor 创建，或者即使有人这样做了，也可能只是 JavaScript 的包装器...

到目前为止，Blazor 没有提供任何方法可以执行 webpack 那样的操作，因此在某些情况下，如果您有大量 JavaScript 或 CSS，则可以配置 webpack 来压缩 / 处理这些文件。在这种情况下，如果您已经为此配置 webpack，则将 React 添加到其中将不成问题。

其中一个例子是MatBlazor。他们使用了许多来自 Material Design Web 组件的 JavaScript 和 CSS，因此他们使用webpack将所有内容打包起来。虽然他们没有使用 React，但这是在 Blazor 中使用 webpack 的示例（如果要在 Blazor 应用中使用 React，则需要完成这个操作）。