相关平台
微信小程序
小程序基础库: 2.14.1
使用框架: React
复现步骤
import Taro from '@tarojs/taro'
import React, { Component } from 'react'
import { View } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
constructor(props){
super(props);
this.state = {
init: false
}
}
componentWillMount () { }
componentDidMount () {
this.setState({
init: true
}, () => {
Taro.createSelectorQuery().select('#text').boundingClientRect((rect) => {
console.log('rect====', rect);
}).exec()
});
}
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
render () {
const {init} = this.state;
return (
<View className='index'>
{
init && <View id='text'>Hello world!</View>
}
</View>
)
}
}
期望结果
能够打印出节点rect信息
实际结果
rect=== null,
设置setTimeout延迟后,可以获取到
环境信息
Taro CLI 3.0.16 environment info:
System:
OS: macOS 10.15.4
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.2 - /usr/local/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.14.6 - /usr/local/bin/npm
npmPackages:
@tarojs/components: 3.0.16 => 3.0.16
@tarojs/mini-runner: 3.0.16 => 3.0.16
@tarojs/react: 3.0.16 => 3.0.16
@tarojs/runtime: 3.0.16 => 3.0.16
@tarojs/taro: 3.0.16 => 3.0.16
@tarojs/webpack-runner: 3.0.16 => 3.0.16
babel-preset-taro: 3.0.16 => 3.0.16
eslint-config-taro: 3.0.16 => 3.0.16
react: ^16.10.0 => 16.14.0
npmGlobalPackages:
typescript: 1.6.2
3条答案
按热度按时间xghobddn1#
Taro.nextTick 包裹一下
xytpbqjk2#
@Chen-jj 试了下,包裹后,也有概率性获取不到节点,Taro.nextTick虽然是下一个时间片执行,但不能保证dom一定渲染完成了。。 之前Taro1.x版本没这个问题
zfycwa2u3#
@felemon taro 1 - taro 2 都是编译型的和你直接写原生没有太大区别,taro 3 是运行时的,也就是说 Taro 的 setState 并不是小程序的 setState。当你的数据经过 Taro.setState ,Taro 首先对你的数据进行了一次 diff 然后才交给 wx.setState。 所以,获取不到是正常的,数据越大这个时间间隔就会越长,对于不支持 nextTick 的支持库,还会转换成 setTimeout 来执行。如果要获取,只能递归来获取,获取不到就继续递归,直到获取成功为止。当然,这样也是有误差的,对于较大的数据变化,dom 的更新总是比较慢的,所以获取的结果可能是 “上一次” 的 dom 信息。