如果大家和mars3d已经有了一段时间的接触，应该已经了解过一个概念叫widget。widget并不是mars3d本身sdk中的内置模块，而是火星科技基于一个相似的标准，在原生js、vue3.0、react或者未来还有其他一些技术栈上的一个解决方案。widget主要就是为了快速实现gis项目中常见的一些工具面板。满足定制化开发的需求，这里我们就来了解一下 在react技术栈下的使用。
    为了方便大家更好的学习，可以先去github上下载开源的react基础项目，这里主要先介绍使用，不过多设计widge资源的导入了。

    1. widget-state.ts

    widget-state.ts 是统一的配置文件，位于 src/widget-state.ts。会默认导出一个对象，接口定义如下

    1. // 为 store state 声明类型
    2. export interface DefaultOption {
    3.   autoDisable?: boolean
    4.   disableOther?: boolean | string[]
    5.   group?: string // group相同的widget一定是互斥的
    6.   meta?: any // 额外参数 不会在每次关闭后清除
    7. }
    9. export interface Widget {
    10.   name: string // 唯一标识
    11.   key?: string // 作为组件 diff 环节的key，用于控制组件重载
    12.   component?: any // widget关联的异步组件
    13.   autoDisable?: boolean // 是否能够被自动关闭
    14.   disableOther?: boolean | string[] // 是否自动关闭其他widget,或通过数组指定需要被关闭的widget
    15.   group?: string // group相同的widget一定是互斥的
    16.   visible?: boolean // 显示隐藏
    17.   data?: any // 额外传参 会在每次关闭后清除
    18.   meta?: any // 额外参数 不会在每次关闭后清除
    19. }
    21. export interface WidgetState {
    22.   widgets?: Widget[]
    24.   openAtStart?: string[]
    26.   defaultOption?: DefaultOption
    27. }

    最需要关注的是 widgets字段，这里存放的就是所有可用的widget。具体配置参考注释和项目代码。openAtStart 中可以用来配置默认显示的widget。这样配置完成之后，我们就可以在页面进来之后直接看到这些面板。

    1. 动态交互

    常用的动态交互函数如下

    1. // 隐藏
    2. export const disable: (widget: string | string[]) => any
    3. // 激活
    4. export const activate: (widget: Widget | string, reload?: boolean) => any
    5. // 全部隐藏
    6. export const disableAll: (force?: boolean) => any
    7. // 更新widget的data数据
    8. export const updateWidget: (widget: string, data: any) => void
    9. // 是否被激活
    10. export const isActive: (widget: string) => any
    1. currentWidget

    不同于vue版本需要通过useWidget来获取当前的widget，react版本可以直接通过props获取