TypeScript 如何让返回取色器ButtonProps的函数具备响应式更新能力

你可以通过「状态驱动函数重执行」的逻辑实现需求，根据你使用的技术栈分为以下几种实现方案：

方案1：基于React/Vue等前端框架（最常用） #

首先将你的getColorPickerControl改造为接收当前颜色作为入参的版本，再利用框架的响应式状态触发函数重新执行、生成新的props对象：

import { useState } from 'react'

// 改造为接收颜色参数的纯函数
const getColorPickerControl = (iconColor: string, onColorChange: (color: string) => void): ButtonProps => {
    return createButton({
        id: 'colorPicker',
        label: 'color picker',
        onColorCellSelected: (colorItem: colorParam) => {
            // 假设colorParam.value为选中的颜色字符串
            onColorChange(colorItem.value)
        },
        iconColor
    })
}

// 上层调用第三方组件的地方
function WrapperComponent() {
    // 用状态存储当前选中的颜色，初始值为原来的硬编码红色
    const [currentIconColor, setCurrentIconColor] = useState('red')
    // 状态变化时会自动重新执行函数，生成新的props对象
    const buttonProps = getColorPickerControl(currentIconColor, setCurrentIconColor)

    // 若第三方组件支持响应式更新props，直接传入即可
    // 若第三方组件仅初始化读取一次props，添加key属性强制组件重建：key={currentIconColor}
    return <ThirdPartyComponent {...buttonProps} />
}

方案2：原生TypeScript无框架场景 #

如果没有使用前端框架，可以通过闭包存储当前颜色、自定义更新回调的方式实现：

// 闭包存储当前颜色值
let currentIconColor = 'red'
// 自定义props更新回调
let onPropsUpdate: (newProps: ButtonProps) => void

const getColorPickerControl = (): ButtonProps => {
    return createButton({
        id: 'colorPicker',
        label: 'color picker',
        onColorCellSelected: (colorItem: colorParam) => {
            currentIconColor = colorItem.value
            // 触发更新回调，通知外部重新获取props
            onPropsUpdate?.(getColorPickerControl())
        },
        iconColor: currentIconColor
    })
}

// 初始化逻辑
const initProps = getColorPickerControl()
thirdPartyInstance.setProps(initProps)

// 监听props更新，同步给第三方组件
onPropsUpdate = (newProps) => {
    thirdPartyInstance.setProps(newProps)
    // 若第三方组件提供重渲染方法，主动调用触发UI更新
    thirdPartyInstance.rerender?.()
}

注意事项 #

• 不推荐直接修改createButton返回的props引用对象，容易产生不可预期的副作用
• 部分第三方组件会提供专门的更新配置/重渲染API，优先用官方提供的API更新props效果更稳定

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