Skip to content

受控改造

leejimqiu edited this page Jan 24, 2022 · 4 revisions

前言

本次受控改造指南以 Switch 举例。

1 新增 Props

组件的 propertie 需要增加受控属性对应的 default 值。 如 Switch 的受控值是 value,则对应的 default 值为 defaultValue

Component({
  properties: {
    type: null,
    value: undefined
  }
})

type = null 是为了保证 defaultValue 没传的时候值为 undefined

2 触发事件

不要使用 this.triggerEvent 反而使用 this._trigger

this._trigger('change', { value })

value 对应的是受控属性

3 增加 controlledProps 属性

Component({
  controlledProps: [{
    key: 'value',
    event: 'change'
  }]
})

key 对应的是受控属性,event 则是第二步对应是事件名。

4 修改内部实现

内部不再手动修改对应的属性,只依赖外部传入

结论

如果还有不懂的话,可以联系 @leejim 沟通