2

現在、Blazor WebAssembly アプリに変換しようとしている React アプリがあります。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 componentsとBlazor JavaScript interopについて読みcharting_library、React アプリと同じように Blazor で使用している JavaScript を使用するために、JavaScript 相互運用機能を備えたコンポーネントを実装しようとしました。そのため、の指示に従ってIJSRuntime、charting_libraryJavaScript コードを下wwwrootに追加し、以下を に追加しました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に関連する他のエラーが発生するため、そうではありません。これは、Visual Studio React アプリケーション テンプレートの一部として使用されたコードが jQuery などの必要な依存関係を追加するcharting_libraryため、React アプリでは問題にならないと私が推測するコード自体の中にあります。create-react-appでは、Blazor アプリでこのような依存関係を確保するにはどうすればよいでしょうか?

ここでの主な質問は、React アプリで使用したのと同じ方法で、Blazor アプリで JavaScript ライブラリを使用する方法です。Blazor コンポーネントを含めIndex.razorたり、jQuery エラーが発生したりするなどの追加の問題は、個別に回答できる場合はここで回答する必要のないおまけの質問です (個別の質問を作成してもかまいません)。

誰でもできる助けをありがとう！C# と React には精通していますが、Blazor は初めてで、JavaScript の知識は限られています。

4

1 に答える 1