机器数据分析平台 > 应用开发者文档 > APP开发手册 > APP开发说明 > 自定义前端组件 >React 自定义组件开发案例

React 自定义组件开发案例

最近更新时间: 2022-02-24 11:15:22

为了提高使用React框架开发自定义组件的效率，create-pandora-app脚手架提供了view-component-react模版。本文将介绍如何使用react框架在Pandora 2.0平台高效的开发自定义组件。

一、使用create-pandora-app创建应用模版

1.生成项目

$ npx create-pandora-app repo-manager -t view-component-react

创建过程中相关参数

appName 应用的标识符，名称规则：大小字符、数字、中划线、下划线，且第一个字符必须是字符
Description 应用的描述
pandora server URL 开发调试时所使用的 pandora 环境的地址。
pandora account username pandora 环境的用户名
pandora account password pandora 环境的密码
Select a package manager 选择包管理工具 npm or yarn
Select your purpose
- 纯组件：将src/modules下的每个文件夹作为入口，每个文件夹都会打包出一个js
- 单页应用：将src/app.tsx作为入口，只会打包出一个js，通常用来构造含有路由的完整的单页应用

App 目录结构

自定义组件 app 整体目录结构如下：

repo-manager
├── app.json
├── appserver
│   └── static
│       ├── css
│       └── js
├── default
│   ├── nav.xml
│   └── views
│       └── views.xml
├── README.md
├── resources
│   ├── extractions
│   └── sourcetypes
├── static
│   └── icon.png
└── webapp
    ├── bin
    │   └── package
    ├── configs
    │   ├── env.js
    │   ├── paths.js
    │   ├── webpack.common.conf.js
    │   ├── webpack.dev.conf.js
    │   ├── webpack.dll.conf.js
    │   └── webpack.prod.conf.js
    ├── package.json
    ├── src
    │   ├── app.tsx
    │   ├── global
    │   │   └── styles
    │   │       └── style.less
    │   ├── modules
    │   │   ├── Dashboard
    │   │   │   └── index.tsx
    │   │   └── Overview
    │   │       └── index.tsx
    │   └── platform.tsx
    ├── tsconfig.json
    └── types
        └── index.d.ts

其中 webapp 目录为开发目录，在该目录下可进行组件相关逻辑的编写和调试。

2.进入项目目录

$ cd repo-manager/webapp

3.初始化项目

$ yarn install

二. 开发自定义组件逻辑

本示例将使用 React 开发框架
Pandora 平台为您提供了以下 SDK 和组件库(仅针对 react 提供)方便您快速构建自己的应用，具体请参考APP开发工具库

App-Sdk
Pandora-Component(仅 react 可用)

1.添加业务逻辑

完成自定义业务逻辑，本示例使用 react 创建 RepoList 组件。
示例代码如下：
新增 src/modules/RepoList/index.tsx 文件，编写仓库列表组件逻辑，其代码如下：

 * src/modules/RepoList/index.tsx
 */
import React from 'react'
import 'antd/dist/antd.css'
import { Table } from 'antd'
import { RepoManager, IRepo } from '@qn-pandora/app-sdk'

const columns = [
  {
    title: '仓库名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '当前数据量',
    dataIndex: 'bytes',
    key: 'bytes'
  },
  {
    title: '数据条数',
    dataIndex: 'docTotal',
    key: 'docTotal'
  },
  {
    title: '存储时限',
    dataIndex: 'retention',
    key: 'retention'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  }
]

export default class RepoList extends React.Component<{}, { repos: IRepo[] }> {
  repoManager: RepoManager
  state = {
    repos: []
  }

  get dataSource() {
    return this.state.repos.map((repo: IRepo) => ({
      ...repo,
      key: repo.name
    }))
  }

  constructor(props: {}) {
    super(props)
    const fetchAll = false // false by default
    const pageSize = 20 // 10 by default

    // 创建@qn-pandora/app-sdk提供的RepoManager的实例
    this.repoManager = new RepoManager(fetchAll, pageSize)
  }

  render() {
    return <Table columns={columns} dataSource={this.dataSource} />
  }

  componentDidMount() {
    // 使用@qn-pandora/app-sdk提供的RepoManager获取仓库列表
    this.repoManager.listRepos().then(repos => {
      this.setState({ repos })
    })
  }
}

2.接入自定义React组件插件机制

自定义React组件必须默认导出一个React组件。
添加 /repolist 路由，渲染上面的 RepoList 组件，示例代码如下：

/**
 * src/app.tsx
 */
import React, { Component } from 'react'
import { Menu } from 'antd'
import { Redirect, Route, Switch, BrowserRouter, Link } from 'react-router-dom'
import './global/styles/style.less'
import Overview from './modules/Overview'
import Dashboard from './modules/Dashboard'
import RepoList from './modules/RepoList'

interface IAppProps {
  context: {
    appName: string
    basePath: string
  }
}

export default class App extends Component<IAppProps, {}> {
  render() {
    const {
      context: { basePath }
    } = this.props
    return (
      <BrowserRouter basename={basePath}>
        <Menu mode="horizontal" defaultSelectedKeys={['overview']}>
          <Menu.Item key="overview">
            <Link to="overview">overview</Link>
          </Menu.Item>
          <Menu.Item key="dashboard">
            <Link to="dashboard">dashboard</Link>
          </Menu.Item>
        </Menu>
        <Switch>
          <Route exact path="/">
            <Redirect to="/overview" />
          </Route>
          <Route path="/overview">
            <Overview />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
          <Route path="/repolist">
            <RepoList />
          </Route>
        </Switch>
      </BrowserRouter>
    )
  }
}

3.查看效果与调试

启动项目

$ yarn start

查看效果
访问 http://localhost:8000 ，效果如下：

三. 打包生成应用

1.打包应用

运行以下命令，会生成 repo-manager.tar.gz

$ yarn run package

2.导入 Pandora 平台查看效果

以上内容是否对您有帮助？