デザイナの組み込み（React）

このトピックではReactフレームワークでデザイナを使用する際のReact対応パッケージについて説明します。React対応パッケージからデザイナをWebアプリケーションに組み込む方法については、クイックスタート > Webデザイナコンポーネントの使用 > Reactを参照してください。

npmからインストール

React対応パッケージはnpmを利用してインストールすることができます。@grapecity/activereports-reactパッケージをプロジェクトにインストールすると、デザイナを使用できます。 React対応パッケージは@grapecity/activereportsパッケージに依存しており、React対応パッケージをインストールすると同時にインストールされます。

Reactのデザイナ

Reactのデザイナは、次のようにJSX（TSX）ファイルにインポートして、コンポーネントのレンダリングツリーに含めることができます。

import { Designer } from "@grapecity/activereports-react";
function App() {
  return (
    <div>
      <Designer />
    </div>
  );
}

デザイナには、次のプロパティが用意されています。

また、親コンポーネントは、デザイナ参照を作成して、Designer クラスのgetReport、setReport、およびprocessCommandメソッドを使用できます。

import { Designer } from "@grapecity/activereports-react";
function App() {
  const designerRef = React.createRef();
  const btnClick = function () {
    designerRef.current.setReport({id: "report.rdlx-json"});
  };
  return (
    <div id="designer-host">
      <button type="button" onClick={btnClick}>
        Open Report
      </button>
      <Designer ref={designerRef} />
    </div>
  );
}