ActiveReportsJS v2.0 beta 4- Web 设计器与 React 集成

创建 React 应用

创建 React 应用的最简单的方法是使用 [color=var(--vscode-textLink-foreground)]创建 React App, 如使用npx 包运行工具:

1. npx create-react-app arjs-designer-app

复制代码

创建 React应用更多可参考文档 [color=var(--vscode-textLink-foreground)]官方文档

安装 ActivereportsJS

报表设计器相关的文件会包含在[color=var(--vscode-textLink-foreground)]@grapecity/activereports npm 包中。 安装当前版本，运行以下命令：

1. npm install @grapecity/activereports@beta

复制代码

也可以使用 yarn命令：

yarn add @grapecity/activereports添加设计器宿主元素

在src 文件夹中添加 DesignerHost.js (或如果您使用的是 typescript DesignerHost.ts) 文件。

添加需要的 import 包DesignerHost.js(ts)

1. import React from "react";
   
2. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
3. import "@grapecity/activereports/styles/ar-js-ui.css";
   
4. import "@grapecity/activereports/styles/ar-js-designer.css";

复制代码

添加以下函数来初始化设计器，改函数是用于接收 宿主元素的选择器：

1. const initDesigner = (designerHostSelector) => {
   
2.   new ReportDesigner(designerHostSelector);
   
3. };

复制代码

添加功能模块 DesignerHost.js(ts)

1. export const DesignerHost = () => {
   
2.   React.useEffect(() => initDesigner("#designer-host"), []);
   
3.   return <div id="designer-host"></div>;
   
4. };

复制代码

该组件调用了 initDesigner 函数，一旦组件完成渲染会，将设计器添加到#designer-host 元素。

在 index.css 文件为 designer-host 元素添加样式文件。

1. #designer-host {
   
2.   margin: 0 auto;
   
3.   width: 100%;
   
4.   height: 100vh;
   
5. }

复制代码

在应用中添加设计器组件

打开App.js(ts)文件使用以下代码替换默认代码：

1. import React from "react";
   
2. import "./App.css";
   
3. import { DesignerHost } from "./DesignerHost";
   
4. 
   
5. function App() {
   
6.   return <DesignerHost />;
   
7. }
   
8. 
   
9. export default App;

复制代码

运行并测试应用

使用npm start 或 yarn start 命令运行应用，可能会存在错误：“fail with the fatal error that the JavaScript heap is out of memory”，打开package.json文件替换start脚本：

react-scripts --max_old_space_size=4096 start

重新运行 npm start 或 yarn start 命令。