Reactアプリケーションの組み込み

このトピックでは、React.jsアプリケーションにJSビューワコンポーネントを組み込む方法について説明します。React.jsアプリケーションサーバーを実行するには、NodeJSがコンピュータにインストールされている必要があります。

「React.jsでのASP.NET Core」テンプレートを選択して、新しいプロジェクトを追加し、ASP.NET Core のミドルウェアに示したように、ASP.NET Core のミドルウェアでActiveReportsのJSビューワを構成します。
次の手順のように、Reactアプリケーションに対してクライアントアプリケーションを構成します。
ClientAppフォルダを展開し、package.jsonファイルを開きます。
依存関係の下にJSビューワの次のパッケージを追加し、package.jsonを保存します。
"@grapecity/ar-viewer-ja": "latest"
コマンドプロンプトでClientAppフォルダを開き、次のコマンドを実行してJSビューワパッケージをインストールします。

npm install
ClientApp\srcフォルダを選択します。

App.jsを開き、その内容を次の内容に置き換えて、JSビューワを初期化します。

App.js	コードのコピー
import React, { Component } from 'react'; import './custom.css'; export default class app extends Component { GrapeCity: any; constructor(props) { super(props); } componentDidMount() { this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', reportID: 'DemoReport.rdlx' }); } componentDidUpdate() { this.viewer.openReport("DemoReport.rdlx"); } render() { return ( <div> <div id="viewer-host" /> </div> ); } }

App.js

コードのコピー

import React, { Component } from 'react';
import './custom.css'; 
export default class app extends Component {
    GrapeCity: any;
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-host',
            reportID: 'DemoReport.rdlx'
        });
    }
    componentDidUpdate() {
        this.viewer.openReport("DemoReport.rdlx");
    }
    render() {
        return (
            <div>
                <div id="viewer-host" />
            </div>
        );
    }
}

index.jsファイルに次のimportステートメントを追加します。
import "@grapecity/ar-viewer-ja/dist/jsViewer.min.js";
import "@grapecity/ar-viewer-ja/dist/jsViewer.min.css";

custom.cssを開き、次のcssを追加して、ビューワのホスト要素のサイズを100%に設定します。

custom.css	コードのコピー
#viewer-host { width: 100%; height: 100vh; }

［ビルド］ > ［ソリューションのビルド］をクリックして、ソリューションをビルドします。F5を押して実行します。