React 组件 | CloudWise 文档

关于React组件开发

# 组件导出

当前平台无法直接使用React的组件。需要依靠ReactComponent来包裹产出。如下:

imprt React, { Component } from 'react';
import ReactComponent from 'data-vi/ReactComponent';
// 正常的react组件
class MyComponent extends Component {
  render() {
    return (
      // your jsx
    )
  }
}
// 导出由data-vi包裹可用的React组件
export default class WrapperMyComponent extends ReactComponent {
  getReactComponent() {
    return MyComponent;
  }
}

# 数据

在这里只阐述如何获取, 更多用法大家见组件基础

props.data 若为每次render自动重新计算data可直接从props.data中获取。
为什么这么说的原因是: 数据挂载有一定的延迟性。
componentWillRecieveProps 当然每次data更新会触发componentWillRecieveProps钩子。若大家对每次数据更新都需计算逻辑可在此处监听。
(loaded | dataChange) event 由于我们的组件被ReactComponent包裹产出。故在当前实例下的props中存在parent(即真实大屏组件)中使用事件通信来监听事件变化。

this.props.parent.bind("loaded", data => {
  // coding...
});
this.props.parent.bind("dataChange", data => {
  // coding...
});
// 但是记得在组件销毁时对应释放当前的监听
this.props.parent.unbind("xxx", handler);

props.parent.getData() 可以函数式的调用getData方法来获取当前最新数据

# 事件

上面也有提到。我们一般的数据通信在普通的组件中有两种形式 - 传送门。这些代码你同样可以写在上面例子中的WrapperMyComponent中。写法也是一致的。
若想直接在React组件中使用事件通信。这时需要借助props.parent来执行。来个例子:

// 省略部分依赖
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.addEventListener();
  }
  addEventListener = () => {
    const eventBus = this.props.parent;
    // 这里用最常用的reised来举个例子
    eventBus.bind("resized", ({ width, height }) => {
      // do your resized code
    });
  };
  // 省略无关代码
}

# defaultProps

实际由于我们的组件不是直出。而且若我们要提供组件切面来进行配置(props.options)的话, 一般是会在包裹函数内设置static defaultOptions来初始化默认项。这些默认项相当于充当了纯React组件中的defaultProps。但如果在严谨的开发角度上，你也可以二次保障在组件内部声明defaultProps

# 组件生命周期

这里说的是低代码平台独有的一些生命周期_render、_draw等。若当前你的代码与React组件无直接交互, 可直接在包裹函数中正常编写。
若需要和React中的一些事件或者内部状态进行逻辑耦合, 建议使用事件监听来达到同样的效果。基本所有的生命周期都会发射对应的事件。

// 省略部分依赖
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.addEventListener();
  }
  addEventListener = () => {
    const eventBus = this.props.parent;
    // 绘制数据完成生命周期
    eventBus.bind('draw', (data) => {
      // do your draw code
    })
  }
  // 省略无关代码

← 组件组件通信 →