在 React 框架中集成可视化编辑器

创建 React 应用

创建 React 应用的最简单的方法是使用 创建 React App, 如使用npx 包运行工具:

npm init react-app arjs-react-designer-app
或使用yarn命令创建：

yarn create react-app arjs-react-designer-app
创建 React应用更多可参考文档 官方文档

安装 ActivereportsJS

报表设计器相关的文件会包含在@grapecity/activereports npm 包中。 安装当前版本，运行以下命令：

npm install @grapecity/activereports-react @grapecity/activereports
也可以使用 yarn命令：

yarn add @grapecity/activereports-react @grapecity/activereports
导入 ActiveReportsJS 样式
在 src\App.css 文件夹中导入以设计器需要的样式文件.

@import “@grapecity/activereports/styles/ar-js-ui.css”;
@import “@grapecity/activereports/styles/ar-js-designer.css”;

#designer-host {
width: 100%;
height: 100vh;
}

将 ActiveReportsJS报表添加到应用程序

ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的public文件夹下，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。

{
“Name”: “Report”,
“Body”: {
“ReportItems”: [
{
“Type”: “textbox”,
“Name”: “TextBox1”,
“Value”: “Hello, ActiveReportsJS Designer”,
“Style”: {
“FontSize”: “18pt”
},
“Width”: “8.5in”,
“Height”: “0.5in”
}
]
}
}

添加 React 报表设计器

打开 src\App.js 文件修改代码：

import React from “react”;
import “./App.css”;
import { Designer } from “@grapecity/activereports-react”;

function App() {
return (