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

part-1

Node.contains() 的MDN链接Node.contains - Web API 接口参考 | MDN

该文中提到，可以通过 document.body.contains(node) 判断node是否为 body 元素的后代元素或 body本身。

part-2

点击 React 组件以外的其他地方执行相应操作的两种方法

这则简书的例子提到了[ref].current.contains(event.target) 这则应用，意味着useRef的返回值中存也存在着类似Node.contains()的方法。

A complete guide to React refs - LogRocket Blog 这则英语写的refs指南确认了这个的使用。

而Check if an Element contains a class in React | bobbyhadz

则展现了不同于[ref].current.contains(event.target)里的.contains

搬运该作者的完整例子

import {useEffect, useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  // 👇️ check if element contains class on mount
  useEffect(() => {
    if (ref.current.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  }, []);

  // 👇️ check if element contains class on click
  const handleClick = event => {
    if (event.currentTarget.classList.contains('my-class')) {
      console.log('Element contains class');
    } else {
      console.log('Element does NOT contain class');
    }
  };

  return (
    <div>
      <div ref={ref} className="my-class" onClick={handleClick}>
        Hello world
      </div>
    </div>
  );
}

[ref].current.classList.contains([classname])

以及 

event.currentTarget.classList.contains([classname])

中，也都封装了.contains这个方法。

此处的.classList，很像 Element.classList 获取DOMTokenList 对象，对此，MDN也有描述DOMTokenList.contains()

====================

更正：

ref.current 的值就是一个浏览器原生的 DOM 节点。