2

我目前有一个 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的信息，并尝试使用 JavaScript interop 实现组件以使用charting_library我正在使用的 JavaScript，其方式与在 Blazor 中的方式与在我的 React 应用程序中的方式相同。因此，按照上的说明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 应用程序中确保这种依赖关系呢？

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

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

4

1 回答 1

1

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

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

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

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

这是一个 答案的链接，它演示了如何在 Blazor 中使用 JavaScript。

希望这可以帮助...

于 2019-11-02T20:52:55.283 回答