如何用controller.js数组填充Slack Block Kit的view.js复选框

你可以通过数组的map方法，把controller里的字符串数组转换成复选框组件要求的options对象结构，直接替换掉My-view.js里硬编码的options数组即可。

修改后的My-view.js代码 #

// 确保arr已经从controller.js中引入到当前文件
function arrayBlock() {
    return createModalBlock('Engage', [
        {
            type: 'section',
            text: {
                type: 'mrkdwn',
                text: 'This is a section block with checkboxes.'
            },
            accessory: {
                type: 'checkboxes',
                // 用map遍历数组生成符合要求的选项结构
                options: arr.map((item, index) => ({
                    text: {
                        type: 'mrkdwn',
                        text: item
                    },
                    description: {
                        type: 'mrkdwn',
                        text: 'user description'
                    },
                    value: `value-${index}`
                })),
                action_id: 'checkboxes-action'
            }
        }
    ], {
        close: {
            type: 'plain_text',
            text: 'Close',
        },
    });
}

关键说明 #

• arr.map((item, index) => { ... })会遍历controller中的数组，把每个字符串元素转换成复选框需要的option对象
• 复选框显示的文本直接使用数组里的item值，确保显示内容是option 1、option 2等
• value用value-${index}生成唯一标识，对应每个选项的索引，方便后续处理选中事件
• 如果需要给不同选项设置不同描述，可在map回调里根据item调整description.text的内容

内容的提问来源于stack exchange，提问作者Daniiiii