Отобразить реагирующий компонент на странице Blazor - PullRequest
Новая
       12

Отобразить реагирующий компонент на странице Blazor

1 голос
/ 28 апреля 2020

Возможно ли отобразить реактивный компонент на странице Blazor? Я пытался добавить теги скрипта на страницу Blazor, но Blazor не позволяет добавлять теги скрипта.

Спасибо за ответ.

1 Ответ

2 голосов
/ 29 апреля 2020

Возможно ли отобразить реактивный компонент на странице Blazor?

Да, это возможно. React - это библиотека javascript, и таким же образом вы можете добавить jquery в свое приложение Blazor, вы также можете добавить React к нему, но у него есть некоторые недостатки.

Я попытался добавить теги сценария на страницу Blazor, но Blazor не позволяет добавлять теги скрипта.

Действительно, вы не можете добавить тег скрипта в файл .razor, а место, которое вы должны добавить, находится в _Host.cshtml file

Теперь вы можете спросить, как добавить React в приложение Blazor? Ну ... это немного сложно.

Что вам нужно сделать, это настроить веб-пакет для генерации всех файлов из 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

Существует множество библиотек js, которые, вероятно, не сможет быть создан с Blazor, или если кто-то сделает это, вероятно, будет просто оболочкой из js и ...

До сих пор Blazor не дает вам никакой возможности чтобы делать вещи, которые может делать веб-пакет, поэтому в некоторых случаях, когда у вас много javascript или css, вы захотите настроить веб-пакет для минимизации / работы с этими файлами. В этом случае, если вы уже настраиваете веб-пакет для этого, добавьте реакцию на него, проблем не будет.

Одним из примеров этого является MatBlazor . Они используют много js и css от веб-компонентов дизайна материалов, поэтому они используют webpack , чтобы связать все вместе. Они не используют React, но это пример того, как использовать веб-пакет в Blazor (то, что вам нужно сделать, чтобы React был в вашем приложении Blazor)

...