Port React app to Blazor app with JavaScript library imported using JavaScript interop

问题

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.

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'} />
    );
  }
}

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>

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()");
    }
}

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

<TradingViewChartComponent />

The error is:

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

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?

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).

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

回答1:

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)

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.

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

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.

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

Hope this helps...

来源：https://stackoverflow.com/questions/58674306/port-react-app-to-blazor-app-with-javascript-library-imported-using-javascript-i