Приложение Port React к приложению Blazor с библиотекой JavaScript, импортированной с использованием взаимодействия JavaScript - PullRequest
Новая
       65

Приложение Port React к приложению Blazor с библиотекой JavaScript, импортированной с использованием взаимодействия JavaScript

0 голосов
/ 02 ноября 2019

В настоящее время у меня есть приложение React, которое я пытаюсь преобразовать в приложение Blazor WebAssembly. В приложении React есть компонент, который импортирует библиотеку JavaScript, пример кода для которой можно увидеть здесь . Импортированный код charting_library сам по себе недоступен без предоставления доступа, но это не должно быть проблемой для ответа на этот вопрос.

В моем приложении React, согласно примеру кода, у меня есть следующеекод (сокращенно для краткости): 

import { widget } from '../../charting_library/charting_library.min';

export class TVChartContainer extends React.PureComponent {
  tvWidget = null;

  componentDidMount() {
    const widgetOptions = {
      // Various properties set here.
    };
    const tvWidget = new widget(widgetOptions);
    this.tvWidget = tvWidget;
  }

  render() {
    return (
      <div className={'TVChartContainer'} />
    );
  }
}

Я прочитал о компонентах Blazor и Blazor JavaScript interop и пытался реализовать компонент с JavaScript-взаимодействиемиспользовать JavaScript charting_library, который я использую, таким же образом в Blazor, как и в моем приложении React. Итак, согласно инструкциям для IJSRuntime, я добавил charting_library код JavaScript в wwwroot и добавил следующее к index.html: 

<script src="charting_library/charting_library.min.js"></script>

IЗатем я создал простой компонент Blazor (Components\TradingViewChartComponent.razor) с самого начала, как мне кажется, способа сделать это, но у меня есть сильное ощущение, что я иду по совершенно неправильному пути: 

@inject IJSRuntime JSRuntime

<h3>TradingViewChartComponent</h3>
<div>
    @DisplayTradingViewChart()
</div>

@code {

    public async Task DisplayTradingViewChart()
    {
        await JSRuntime.InvokeVoidAsync("new widget()");
    }
}

Также не ясно, как я использую этот компонент в Index.razor. Следующие ошибки приводят к ошибке: 

<TradingViewChartComponent />

Ошибка:

"Обнаружен элемент разметки с неожиданным именем TradingViewChartComponent". Если предполагается, что это компонент, добавьтедиректива @using для ее пространства имен. "

И это относится к файлу примера шаблона SurveyPrompt.razor. Я не уверен, как устанавливается соединение, но, возможно, это разрешается автоматически, когда собирается остальная часть кода? А это не так, потому что я получаю другие ошибки, относящиеся к jQuery, такие как "Не удается найти файл определения типа для 'jquery'." Это внутри самого кода charting_library, который, я думаю, не является проблемойв приложении React, поскольку create-react-app, который использовался как часть шаблона приложения Visual Studio React, добавляет необходимые зависимости, такие как jQuery. Так как же обеспечить такие зависимости в приложении Blazor?

Главный вопрос здесь состоит в том, как использовать библиотеку JavaScript в приложении Blazor так же, как я использовал ее в приложении React? Дополнительные проблемы, такие как включение компонента Blazor в Index.razor и ошибка jQuery, которую я получаю, - это бонусные вопросы, на которые нет необходимости отвечать здесь, если на них можно ответить отдельно (я не против создавать для них отдельные вопросы). ).

Спасибо за любую помощь! Я знаком с C # и React, но плохо знаком с Blazor, и мои знания JavaScript ограничены.

1 Ответ

1 голос
/ 02 ноября 2019

Компоненты и код JavaScript должны выполняться после рендеринга приложения Blazor. Наиболее подходящим местом для этого является использование JSInterop из событий жизненного цикла компонента OnAfterRender (bool firstRender) и OnAfterRenderAsync (bool firstRender)

Этот код: await JSRuntime.InvokeVoidAsync("new widget()"); должен быть помещен в один из этих двух методов, и автоматически вызывается, скажем, для создания и инициализации вашего виджета JavaScript.

Вы создали этот компонент? <TradingViewChartComponent /> Наверное, нет, так как вы можете попытаться использовать его? Нет такого компонента

. Этот @DisplayTradingViewChart() вызывает метод DisplayTradingViewChart (), когда страница отображается. Это может привести к ошибке. Еще раз, используйте два метода выше.

Вот ссылка на ответ, который демонстрирует, как вы можете использовать JavaScript в Blazor.

Надеюсь, это поможет ...

...