相关平台

微信小程序

小程序基础库: 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