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

2022-07-15 13:53:07 +08:00
 devwolf

契机:最近有在一则简书 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 友还有没有其他的相关好文推荐

1469 次点击
所在节点    React
2 条回复
anjianshi
2022-07-15 14:16:43 +08:00
这是浏览器 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
2022-07-15 14:18:39 +08:00
@anjianshi 噢噢,好的,感谢更正,那我学习的大方向确定了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/866414

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX