入口文件

index

该文件是组件的入口，必须通过export default的方式导出一个react组件。

遵循React的单项数据流设计，每当用户改变组件的状态时（如：配置、交互等），平台通过props更新数据和接口函数给组件，组件可以根据props的参数做渲染逻辑。

const MyComponent = props => {
  const { configuration, id, data } = props;
  const { dimension, component } = chart;

  const styles = {
    position: 'absolute',
    ...dimension.chartPosition,
    ...dimension.chartDimension,
    fontFamily: component.fontFamily,
    fontSize: component.fontSize,
    color: component.color
  };

  return (
    <div className="__easyv-component" style={styles} id={id}>
      {data[0].text}
    </div>
  );
};

export default MyComponent;

属性以及平台API相关参数说明

属性：

id: string

平台运行时，每个组件实例都会被自动分配一个组件id，id每次都不相同，用于平台查找组件。

configuration: object | array

该参数为组件开发者自行定义的配置文件main.json中的configuration配置数据。

根据配置项的版本不同，返回的数据有所不同，旧版本为所有配置项都以 _ 开头，会按原数据返回。

{
  ...
	"configuration": [
    {
      "_name": "chart",
      "_displayName": "组件",
      "_value": []
    },
    {
      "_name": "interaction",
      "_displayName": "交互",
      "_value": []
    }
  ]
  ...
}

如果你要解析数据，则需要调用 reduceConfig方法，通过npm i -g @easyv/utils安装对应包。

import { reduceConfig } from '@easyv/utils/lib/common/reduce-config';

<!-- 新版本创建项目后，自带utils文件，可通过以下方式导入 -->
<!-- import {reduceConfig} from './utils/reduce-config' -->

export default function (props) {
  const config = reduceConfig(props.configuration);
	return <div>...</div>
}

新版本则去掉了 _ (推荐使用新版本)，平台会做一层处理，将数组的数据转换为对象，不需要开发者自己处理（平台v3.15.0及以上支持，开发环境下开发者工具版本请确保 @easyv/react-component-builder 不低于 v0.13.0）。

{
  ...
	"configuration": [
    {
      "name": "chart",
      "displayName": "组件",
      "value": []
    },
    {
      "name": "interaction",
      "displayName": "交互",
      "value": []
    }
  ]
  ...
}

开发者定义的configuration为组件的默认配置数据，用户在平台修改参数后，该数据也会对应发生变化。

data: array

组件的数据对象，为主数据文件main.data.json中的data属性定义，由平台读取作为组件初始数据，随着用户修改数据源的内容而改变。

childrenConfig: array

子组件配置对象的列表，随着用户添加子组件和修改子组件配置而改变。

childrenData: array

子组件数据对象的列表，随着用户添加子组件和修改子组件数据而改变，与childrenConfig顺序相同。

callbackValues: {[key: string]: any}

回调组件设置的回调对象，每次组件回调数据后，保存其更新了的回调对象。

下图为控制台输出一次回调中的callbackValues：

edit: boolean （需平台 v3.13.0版本及以上才支持）

标记组件是否处于独立编辑模式，默认为false。

编辑视图下的组件，可以做一些组件通过可视化的操作来修改组件配置项参数的目的（需要组件自身支持）。

actions: array （需平台 v3.13.0版本及以上才支持）

组件在配置文件中定义的自定义动作数组，即main.json中的actions属性。

events: array （需平台 v3.13.0版本及以上才支持）

组件设置的自定义事件数组，当在平台上为组件添加自定义事件后，平台会保存每个事件对象在该数组中。

width: number （需平台 v3.18.8版本及以上才支持）

组件的宽度，可在main.json中定义初始值。

{
  ...
	"width": 200,
  "height": 70
  ...
}

用户可在平台"样式"选项卡的"位置尺寸"改变其值。

height: number （需平台 v3.18.8版本及以上才支持）

组件的高度，定义与平台配置方法和width属性相同。

top: number （需平台 v3.18.8版本及以上才支持）

组件距离画布顶部的距离，在平台"样式"选项卡的"位置尺寸"改变其值。

left: number （需平台 v3.18.8版本及以上才支持）

组件距离画布左边的距离，平台配置方法与top属性相同。

平台提供的API方法：

onRelative(id: string, data: any): void

该方法在配置组件回调时使用，用于组件通知平台更新回调对象，更新结果会显示在callbackValues中。

• id: 组件id
• data: 要更新的回调对象

emit(eventName: string, data: any, componentId?: number): void （需要平台 v3.13.0版本及以上才支持）

该方法用于组件通知平台触发了哪些自定义事件

• eventName: 组件在主配置文件中定义的triggers的value属性
• data: data在emit中被用于条件判断。比如，当事件触发后，平台自定义事件中的条件判断为s==1，那么emit会检测data中s的值是否满足该条件
• componentId: 发送事件的组件的id，

• 如果没有子组件，则可不传，不传为当前组件id，
• 如果有子组件，不传则为父组件id，如果是子组件则必须传子组件的id.

emitEvent(payload): void

payload为组件触发事件后需要更新的状态，包含id、state、activeState、config的一些值。

该事件用于组件旧版本的交互事件配置，已不推荐使用，建议用emit，并使用 events配置项来自定义触发的事件。

updateConfig({id？, type, payload}) （需要平台 v3.13.0版本及以上才支持）

该方法用于组件更改自身的配置和数据对象

• id：可不传，默认为当前组件的id，如果是子组件的更新，则必须传子组件的id，不然会更新失败。
• type: 'config' | 'data' | 'actions' | 'camera'

• config: 更新组件的configuration属性。

• 在v4.13.0之前，用于更新config，只能是组件进入编辑模式，即edit为true的时候才支持
• v4.13.0及以上，支持组件在非编辑模式下，也可以支持更新config配置，但只在编辑页面才生效。

• data: 更新组件的data静态数据
• actions: 用于动态更新组件的actions配置。使用场景为：自定义动作中可能存在一些动态的数据，需要在其他配置项发生变化的时候，需要动态更新，比如场景的镜头数据等。
• camera: 该类型是在镜头数据保存的时候才需要用到，一般不是三维的镜头数据使用不上。

• payload: 当type === 'data'时，payload为静态数据数组，否则为{path, field, value} | {path, field, value}[]。

• path: string 需要更新的config属性路径，如['chart', 'component', 'color']
• field: string 需要更新的控件属性，默认为value
• value: any 控件属性对应的值

uploadAssets(path,file,signal?,rename?,prefix？): string

• path：上传传位置的相对路径，默认会在对应服务器的${host}/${path}下。
• file：文件，FILE或Blob类型。
• signal:请求中止信号。
• prefix:文件重命名时添加的前缀。
• rename:是否重命名，默认为true，重命名后的格式为 ${prefix}${randomId()}_${当前时间戳}_${randomId()}${原文件名}。prefix为前缀参数，randomId()返回一个由字母和数字组成的随机ID。

如遇其他使用问题，可扫描下方二维码，获取更多产品支持~