taro & querySelector & refs

delayQuerySelector

https://github.com/NervJS/taro-ui/blob/dev/src/common/utils.ts#L18


function delayQuerySelector(
  self,
  selectorStr: string,
  delayTime = 500
): Promise<Array<execObject>> {
  const $scope = ENV === Taro.ENV_TYPE.WEB ? self : self.$scope
  const selector: SelectorQuery = Taro.createSelectorQuery().in($scope)

  return new Promise(resolve => {
    delay(delayTime).then(() => {
      selector
        .select(selectorStr)
        .boundingClientRect()
        .exec((res: Array<execObject>) => {
          resolve(res)
        })
    })
  })
}

refs

https://nervjs.github.io/taro/docs/ref.html

https://nervjs.github.io/taro/docs/ref.html#通过函数创建-ref

函数创建 ref

// 不管在任何情况下，Taro 都推荐你使用函数的方式创建 ref

// 自定义组件， 父组件
class MyComponent extends Component {

  roar () {
    // 会打印 `miao, miao, miao~`
    this.cat.miao()
  }

  refCat = (node) => this.cat = node // `this.cat` 会变成 `Cat` 组件实例的引用

  render () {
    return <Cat ref={this.refCat} />
  }
}

// 子组件
class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}

Taro.createRef

// 自定义组件， 父组件
class MyComponent extends Component {

  this.cat = Taro.createRef()

  roar () {
    // 会打印 `miao, miao, miao~`
    this.cat.current.miao()
  }

  render () {
    return <Cat ref={this.cat} />
  }
}

// 子组件
class Cat extends Component {
  miao () {
    console.log('miao, miao, miao~')
  }

  render () {
    return <View />
  }
}