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

Question

我目前有一个 React 应用程序，我正在尝试将其转换为 Blazor WebAssembly 应用程序。 React 应用程序有一个导入 JavaScript 库的组件，可以看到其示例代码 here。如果未授予访问权限，则无法访问导入的 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 components 和 Blazor JavaScript interop 的信息，并尝试使用 JavaScript 互操作实现一个组件，以使用我正在使用的 JavaScript charting_library，其方式与在 Blazor 中的方式与在我的 React 应用程序中的方式相同。因此，根据instructions on IJSRuntime，我在wwwroot 下添加了charting_library JavaScript 代码，并将以下内容添加到index.html：

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

然后，我创建了一个简单的 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 应用程序中出现问题，因为用作 Visual Studio React 应用程序模板一部分的 create-react-app 添加了必要的依赖项，例如 jQuery。那么如何在 Blazor 应用中确保此类依赖关系？

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

感谢任何人的帮助！我熟悉 C# 和 React，但对 Blazor 很陌生，我的 JavaScript 知识有限。

Answer 1

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

这段代码：await JSRuntime.InvokeVoidAsync("new widget()");，应该放在这两种方法之一中，并被自动调用，比如创建和初始化你的 JavaScript 小部件。

您是否创建了此组件？ <TradingViewChartComponent /> 我想没有，所以你怎么能尝试使用它。没有这样的组件

这个@DisplayTradingViewChart() 在页面被渲染时调用了DisplayTradingViewChart() 方法。它可能会导致错误。再次使用上面的两种方法。

Here is a link 回答演示如何在 Blazor 中使用 JavaScript。

希望对你有帮助……