关于获取自定义组件的高度问题

[cooliean]

        const { isError, errorMessage } = this.state
        const query = Taro.createSelectorQuery().in(this.$scope)
        query
            .select('#errorView')
            .boundingClientRect()
            .exec(res => {
                console.log('==log========================');
                console.log(res);
                console.log('=============================');
            })
        return (
            <View className='index'>
                <MainHeader />
                <View className='line-h'></View>
                <MainTool />
                <View className='line-h'></View>
                <ErrorTip id='errorView' message={errorMessage} />
            </View>
        )

这个代码获取的信息是null，我就是想要这个组件得当前坐标，不知道怎么获取，谢谢了
获取页面得正常View是可以的

系统信息

• 操作系统: Macos 10.14.1 (18B75)
• Taro 版本 1.2.0-beta.14
• Node.js 版本 v8.12.0
• 报错平台 weapp

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[cooliean]

还有在组件里面拿页是拿不到的。

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'

import './ErrorTip.styl'

class ErrorTip extends Component {
    static options = {
        addGlobalClass: true
    }

    constructor () {
        super(...arguments)
    }
    render () {
        const { message } = this.props;
        // const query = Taro.createSelectorQuery().in(this.$scope)
        const query = Taro.createSelectorQuery()
        query
            .select('#errorView')
            .boundingClientRect()
            .exec(res => {
                console.log('==log========================');
                console.log(res);
                console.log('=============================');
            })
        return (
            <View id="errorView" className='error errorView'>
                <Text>{message}</Text>
            </View>
        )
    }
}

export default ErrorTip

[Chen-jj]

在 componentDidMount 后获取，不要在 render 函数。又或者使用 ref。

[cooliean]

    componentDidMount () {
        const query = Taro.createSelectorQuery().in(this.$scope)
        // const query = this.refs.errorView;
        query.select('.errorView').boundingClientRect().exec(res => {
            console.log('==json==================');
            console.log('res\n');
            console.log(JSON.stringify(res, null, '\t'));
            console.log('========================');
        })

        /*
        this.refs.errorView.boundingClientRect().exec(res => {
            console.log('==json==================');
            console.log('res\n');
            console.log(JSON.stringify(res, null, '\t'));
            console.log('========================');
        })
        */
    }

还是null，不知道ref怎么写，没有写出来 可以给一段例子代码不呢，谢谢了：）

[yuche]

@cooliean
ref:
https://nervjs.github.io/taro/docs/ref.html#docsNav

[Chen-jj]

首先要搞清楚一点，createSelectorQuery 只能选择内置组件，不能选择自定义组件。

所以你用于选择自定义组件，是错的。将 id 和对应的 query 逻辑放子组件里。

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Child from '../../components/child/child'

export default class PageView extends Component {
  render () {
    return <View>
      <Child></Child>
    </View>
  }
}

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Child extends Component {
  componentDidMount () {
    const query = Taro.createSelectorQuery().in(this.$scope)
    query.select('.errorView').boundingClientRect().exec(res => {
        console.log('==json==================');
        console.log('res\n');
        console.log(JSON.stringify(res, null, '\t'));
        console.log('========================');
    })
  }

  render() {
    return (
      <View class='errorView'>123</View>
    )
  }
}

至于 ref 的用法可以看文档。

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[cooliean]

我明白了。谢谢

[Carnia]

taro2版本是要加.in(this.$scope)的，后来发现taro3去掉.in(this.$scope)就好了

const query = Taro.createSelectorQuery().in(this.$scope)

改为

const query = Taro.createSelectorQuery()

环境："@tarojs/taro": "3.0.0-rc.3",

试试？

[myadmin]

@Chen-jj 写了一个自定义 tab-bar 组件，然后在别的组件中通过 Taro.createSelectorQuery() 获取不到自定义 tab-bar 的高度，这个是无法解决吗？我看官方的文档中也没有说怎么去获取自定义 tabbar 的高度。

[rich-bot]

老哥解决了吗 我也同样问题

[vijay0726]

@myadmin +1

[husterL9]

@myadmin +1

请问解决了吗

@vijay0726