收藏
回答

【已解决】页面this.createSelectorQuery()为什么查不到自定义组件实例?

自定义组件:

<text class="t">custom component</text>


页面:

Component({
  lifetimes: {
    attached() {
      this.createSelectorQuery().select('.t').boundingClientRect(
        r => {
            console.log(r) // 输出 null
        }
      ).exec()
    }
  }
})


---

【已解决】

小程序的自定义组件和React是不同的。

当你这样定义一个组件:

<text class="t">custom component</text>


然后在页面引用:

{
  "usingComponents": {
    "c": "../components/c/index"
  }
}


wxml中的实际布局是这样的:

<page>
    <c>
        <text class="t">custom component</text>
    </c>
</page>


text上多出一层c。

页面获取自定义组件实例,首先须定位到该自定义组件的外层节点,通过该外层节点再定位自定义组件的内部节点,这样才能selectorQuery才能查到自定义组件的内部节点,上面的代码试图在页面直接访问自定义组件内部节点,永远返回 null。

页面引用:

<!-- 此处必须显示指定一个class,服务于页面的 this.selectComponent() -->
<c class="c"/>


// page.js
Component({
  lifetimes: {
    attached() {
      this.createSelectorQuery().in(this.selectComponent('.c')).select('.t').boundingClientRect(
        r => {
            console.log(r)
        }
      ).exec()
    }
  }
})


输出:

{
    "bottom": 22,
    "dataset": {},
    "height": 22,
    "id": "",
    "left": 0,
    "right": 142.875,
    "top": 0,
    "width": 142.875
}


代码片段:https://developers.weixin.qq.com/s/rfCnXPmI7eGp

---

ps:页面在引用自定义组件时还要额外添加class,这真的很多余,好奇为什么要设计成这样。

最后一次编辑于  2023-03-19
回答关注问题邀请回答
收藏

1 个回答

  • Cythia🍓
    Cythia🍓
    2023-08-14

    太感谢了!!

    自定义组件节点增加选择器 真的是没想道

    2023-08-14
    有用
    回复 2
    • 从君华
      从君华
      2023-08-18
      总之就是很奇葩。
      2023-08-18
      回复
    • xiao
      xiao
      04-05
      啥意思
      04-05
      回复
登录 后发表内容