使用使用JavaScript互操作导入的JavaScript库将React应用程序移植到Blazor应用程序 [英] Port React app to Blazor app with JavaScript library imported using JavaScript interop

问题描述

我目前有一个React应用，正在尝试将其转换为Blazor WebAssembly应用. React应用程序具有一个导入JavaScript库的组件，其示例代码可以在

I currently have a React app that I'm trying to convert to a Blazor WebAssembly app. The React app has a component that imports a JavaScript library, the sample code for which can be seen here. The imported charting_library code itself isn't accessible without access being granted, but that shouldn't be an issue for answering this question.

在我的React应用程序中，按照示例代码，我有以下代码(为简洁起见):

In my React app, as per the sample code, I have the following code (stripped for brevity):

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互操作，并尝试使用JavaScript interop实现一个组件以使用我正在使用的JavaScript charting_library，在Blazor中的方式与在React应用程序中的方式相同.因此，根据

I've read about Blazor components and Blazor JavaScript interop, and have attempted to implement a component with JavaScript interop to use the JavaScript charting_library I'm using, in the same manner in Blazor as in my React app. So, as per the instructions on IJSRuntime, I've added the charting_library JavaScript code under wwwroot and added the following to index.html:

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

然后我创建了一个简单的Blazor组件(Components\TradingViewChartComponent.razor)，该组件以我认为是实现此目的的方式开始，但是我有一种强烈的感觉，我走在了完全错误的轨道上:

I've then created a simple Blazor component (Components\TradingViewChartComponent.razor) with the start of what I think is the way to do this, but I have a strong feeling I'm going down the completely wrong track:

@inject IJSRuntime JSRuntime

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

@code {

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

还不清楚我如何在Index.razor中使用此组件.以下将导致错误:

It's also not clear how I use this component in Index.razor. The following results in an error:

<TradingViewChartComponent />

错误是:

找到了带有意外名称'TradingViewChartComponent'的标记元素.如果要用作组件，请为其名称空间添加@using指令."

"Found markup element with unexpected name 'TradingViewChartComponent'. If this is intended to be a component, add a @using directive for its namespace."

它引用模板示例文件SurveyPrompt.razor.我不确定如何建立连接，但是也许在其余代码构建时会自动解决吗?并不是因为我遇到了与jQuery有关的其他错误，例如无法找到'jquery'的类型定义文件." 这在charting_library代码本身内，我想这不是在React应用程序中出现问题，因为用作Visual Studio React应用程序模板一部分的create-react-app添加了必需的依赖项，例如jQuery.那么如何在Blazor应用程序中确保这种依赖性呢?

And it refers to the template example file SurveyPrompt.razor. I'm not sure how the connection is made, but maybe this resolves automagically when the rest of the code builds? Which it doesn't because Im getting other errors relating to jQuery such as "Cannot find type definition file for 'jquery'." This is within the charting_library code itself which I guess isn't an issue in a React app because the create-react-app that was used as part of the Visual Studio React application template adds the necessary dependencies such as jQuery. So how can such dependencies be ensured in a Blazor app?

这里的主要问题是，如何像在React应用程序中一样使用Blazor应用程序中的JavaScript库?其他问题，例如Index.razor中的Blazor组件和我收到的jQuery错误，都是奖励问题，如果可以单独回答，则无需在此处回答(我不介意为他们创建单独的问题) ).

The main question here is, how to use a JavaScript library in a Blazor app in the same way I used it in a React app? The additional issues such as including the Blazor component in Index.razor and the jQuery error I'm getting are bonus questions that don't need to be answered here if they can be answered separately (I don't mind creating separate questions for them).

感谢任何人都可以提供的帮助！我熟悉C#和React，但对Blazor还是陌生的，而且我的JavaScript知识很有限.

Thanks for any help anyone can give! I'm familiar with C# and React, but new to Blazor, and my JavaScript knowledge is limited.

推荐答案

JavaScript组件和代码应在Blazor应用呈现后执行. 最合适的方法是在组件的生命周期事件OnAfterRender(bool firstRender)和OnAfterRenderAsync(bool firstRender)中使用JSInterop

JavaScript components and code should be executed after the Blazor app is rendered. The most appropriate place to do that is to use JSInterop from the component's life cycle events OnAfterRender (bool firstRender) and OnAfterRenderAsync (bool firstRender)

此代码:await JSRuntime.InvokeVoidAsync("new widget()");，应放置在这两种方法之一中，并会​​自动调用，例如创建和初始化JavaScript小部件.

This code: await JSRuntime.InvokeVoidAsync("new widget()");, should be placed in one of these two methods, and is automatically called, say to create and initialize your JavaScript widget.

您创建了此组件吗? <TradingViewChartComponent /> 我想不，那么您怎么能尝试使用它.没有这样的组件

Did you create this component? <TradingViewChartComponent /> I guess no, so how can you try to use it. There is no such component

呈现页面时，此@DisplayTradingViewChart()调用DisplayTradingViewChart()方法.可能会导致错误.再次使用上面的两种方法.

This @DisplayTradingViewChart() is calling the DisplayTradingViewChart() method, when the page is being rendered. It may lead to an error. Once again, use the two methods above.

这是一个链接到一个答案，该答案演示了如何在Blazor中使用JavaScript.

Here is a link to an answer which demonstrate how you can use JavaScript in Blazor.

希望这对您有帮助...

Hope this helps...

这篇关于使用使用JavaScript互操作导入的JavaScript库将React应用程序移植到Blazor应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！