ActiveReportsJS React 보고서 디자이너

이 페이지에서는 ActiveReportsJS React 보고서 디자이너에 대해 자세히 살펴봅니다. 디자이너 컴포넌트를 React 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.

ActiveReportsJS React NPM 패키지

@grapecity/activereports-react npm 패키지를 통해 ActiveReportsJS React 보고서 디자이너 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다.

ActiveReportsJS React 디자이너 컴포넌트

ActiveReportsJS React 디자이너 컴포넌트는 JSX(TSX) 파일로 내보내 컴포넌트의 렌더링 트리에 포함할 수 있습니다. 예를 들어 다음과 같습니다.

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

디자이너 컴포넌트는 다음 속성을 허용합니다.

또한 디자이너 컴포넌트에 대한 ref를 생성하여 부모 컴포넌트에서 디자이너 클래스 인스턴스의 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>
  );
}