回调组件开发

回调的基本概念

回调的定义
即组件间需要实现数据联动时，用到的动态参数；
组件通过定义回调参数，以实现数据交互切换。

回调组件场景

回调组件指组件可以将内部的数据传递给外部的其他组件使用，这样就可以将2个组件进行关联，外部组件可以根据该组件的数据变化而改变状态。基于回调可以实现很多交互场景，如点击按钮触发视图变化、定时滚动触发视图变化等。在本文中，我们的目标是实现一个组件（假定你已经看过快速入门或已经了解组件开发流程），当其被点击时，将数据传递给外部。

回调的详细介绍文档见👉https://dtstack.yuque.com/books/share/857405df-2200-4fc9-b9c3-7d8579fa38be/mlmfc5

1. 回调配置

首先在config/main.json中加入以下代码

{
	...
  "configuration": {
  	...
    {
      "name": "interaction",
      "displayName": "交互",
      "value": [
        {
          "name": "callback",
          "displayName": "回调参数",
          "type": "array",
          "value": [],
          "config": {
            "template": [
              {
                "name": "callback",
                "displayName": "回调",
                "type": "object",
                "value": [
                  {
                    "name": "origin",
                    "displayName": "字段值",
                    "type": "input",
                    "value": ""
                  },
                  {
                    "name": "target",
                    "displayName": "变量名",
                    "type": "input",
                    "value": ""
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

上述代码创建了一个名为interaction的配置组，interaction为平台保留属性值，表示定义的是交互配置，这些配置不会出现在组件的样式面板中，而是被放到交互面板中。我们在里面定义了一个名为回调参数的配置对象，这个对象类型是array，表示其是一个可以由用户动态增减的配置组列表，列表的每一项都是一个配置组，单个配置组的对象结构被定义在template中，在template中我们定义了2个输入框，第一个是“字段值”，表示组件数据对象的哪个属性值要被传递到外部，另一个是“变量名”，表示该值会被存放在外部的哪个变量上以及其他组件应该通过什么名称来使用它。听起来好像有点复杂，简单的说就是将组件数据中某个属性的值放到全局变量中的另一个变量中，好让其他组件可以取到。

2. 关联代码逻辑

定义好配置界面以后，我们需要将用户指定的组件数据属性值告诉平台，通过调用props提供的onRelative这个平台接口来实现，来看以下代码

const { height, configuration, id, data, onRelative } = props;
//...
// index.jsx
const onCallbackData = () => {
  const callbacks = Object.values(config.interaction.callback);	// 1
  if (callbacks.length) {
    const callbackData = {};
    callbacks
      .map((o) => {
      const item = data[0];	// data为组件数据对象
      if (o.origin in item) {	// 2
        callbackData[o.target] = item[o.origin];	// 3
      }
    });
    onRelative(id, callbackData)	// 4
  }
}

 return <p onClick={onCallbackData}>点我回调数据</p>

上述代码实现了当用户触发点击行为时，将组件的属性值通知给平台以实现回调过程。当然你也可以根据需求在不同的行为中触发回调，或是定期触发回调。

第1步从配置项中获取callback(回调参数)对象的值(value)，值为数组格式，数组的每一项是template中定义的数据结构，只是值不同。在这里是拿到了用户定义的字段值和变量名的列表

第2和3步分别是过滤出指定的字段值并映射到一个新对象的新变量中

第4步是调用接口，通知平台更新回调值

3. 设置回调

为了测试该功能，需要先发布组件。

接着进入平台添加该组件，并在回调中配置好要回调的字段，将字段值设置为text，将变量名设置为text1，然后修改一下组件静态数据以便确认效果，我们将text改成“一只羊”。

然后我们需要另一个组件来接收text的值，这里我们添加一个标题组件，给它添加一个过滤器，过滤器是获取回调变量的方式之一，从callbackArgs里拿到上一步抛出的变量名text1并返回标题组件所需的格式即可

4. 最终效果

5. 全局回调管理

设置完回调后，你可以在编辑页上方点击“回调管理”选项，查看该大屏的所有回调关系。

“源组件”、“目标组件”分别对应发出回调的组件和接收回调的组件，“回调参数”即由源组件发出、目标组件接收的回调字段。

根据业务需求，你可能希望发出的回调数据不来源于组件数据，而是由自己在代码中定义，或者希望不在平台中输入变量名，而是发出固定的变量名。这种情况下，你可能会在配置文件的"template"中省略字段值(origin)和变量名(target)，以分页组件为例：

该组件省略回调了的字段值(回调数据来源于代码中定义的当前页码)。为其设置回调后，你会发现全局回调管理中，源组件不显示该分页组件：

注意：平台并不强制规定回调中"template"的写法，只要"onRelative"接口传入回调对象，回调均可生效，但目前平台会因为省略了字段值和变量名而读取不到全局回调管理中的源组件，虽然不影响回调功能，我们仍建议你默认保留字段值和变量名的配置

6. 其他

示例源码下载

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