使用 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 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，我在 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 />

错误是：

"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 相关的其他错误，例如 "Cannot find type definition file for 'jquery'." 这是在 charting_library 代码本身内，我猜它不是'在 React 应用程序中这不是问题，因为用作 Visual Studio React 应用程序模板一部分的 create-react-app 添加了必要的依赖项，例如 jQuery。那么如何在 Blazor 应用程序中确保这种依赖关系？

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

感谢任何人可以提供的帮助！我熟悉 C# 和 React，但对 Blazor 不熟悉，JavaScript 知识有限。

Answer 1

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

中的 JSInterop

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

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

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

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

希望这对您有所帮助...

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

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

reactjs

webassembly

blazor

javascript-interop

blazor-client-side