使用使用JavaScript互操作导入的JavaScript库将React应用程序移植到Blazor应用程序

我目前有一个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的文章，并尝试以与charting_library我的React应用程序相同的Blazor方式，使用JavaScript interop实现一个组件以使用我正在使用的JavaScript 。因此，按照上的说明IJSRuntime，我在下面添加了charting_libraryJavaScript代码wwwroot，并将以下内容添加到index.html：

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

然后Components\TradingViewChartComponent.razor，我以执行此操作的方式开始创建了一个简单的Blazor组件（），但我强烈希望自己走在完全错误的轨道上：

@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应用程序中确保这种依赖性呢？

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

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