V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
devwolf
V2EX  ›  React

初窥.contains 在 react 中应用的冰山一角

  •  
  •   devwolf ·
    yctjb1 · 2022-07-15 13:53:07 +08:00 · 1674 次点击
    这是一个创建于 865 天前的主题,其中的信息可能已经有所发展或是发生改变。

    契机:最近有在一则简书 https://www.jianshu.com/p/f1958db7234c 中认知到 useRef 的返回对象里有个.current.contains 这样的方法(该例子讲的是如何点击指定 ref 以外的内容来触发某个方法)。
    正好今天有空,查了一下,发现描述比较少,可能搜索用的关键词不得要领。 大致查到了如下几个线索: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains
    https://developer.mozilla.org/zh-CN/docs/Web/API/DOMTokenList/contains
    首先是node.contains( otherNode ),原生的 js 节点对象上有这个方法,表示传入的节点是否为该节点的后代节点。Element.classList这样得到的 DOMTokenList 对象也有.contains 方法,不过此时传入的值是类名

    https://bobbyhadz.com/blog/react-check-if-element-has-class 这个网站的例子向我展示了在 react 中后者的两种应用——ref.current.classList.contains('my-class') 以及event.currentTarget.classList.contains('my-class')

    这么一来,我才醒悟,我并不知道 react 中的 ref 和 event 具体多了哪些其实很有用的新方法(除了 react 官网介绍的那些),想找个更全一点的,类似 mdn 上那样很全的对象描述。
    有找到一篇 https://blog.logrocket.com/complete-guide-react-refs/ 这样的 ref 指南,
    想问问各位 v 友还有没有其他的相关好文推荐

    2 条回复    2022-07-15 14:18:39 +08:00
    anjianshi
        1
    anjianshi  
       2022-07-15 14:16:43 +08:00   ❤️ 1
    这是浏览器 DOM 自带的方法。和 React 没有关系。
    你这里 ref.current 的值就是一个浏览器原生的 DOM 节点。

    想知道所有可以用的属性和方法,就看 MDN 就够了。
    https://developer.mozilla.org/zh-CN/docs/Web/API/Element
    https://developer.mozilla.org/zh-CN/docs/Web/API/Node
    把里面的“属性”方法“挨个了解一遍
    devwolf
        2
    devwolf  
    OP
       2022-07-15 14:18:39 +08:00
    @anjianshi 噢噢,好的,感谢更正,那我学习的大方向确定了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1048 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 21:25 · PVG 05:25 · LAX 13:25 · JFK 16:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.