React组件ref调用contains方法报错，如何检测无权限组件点击范围？

这个问题我之前也碰到过！核心原因是你通过ref拿到的是XYZ组件的React实例对象，而不是真正的DOM元素——只有DOM元素才会自带contains()方法，所以才会报"contains is undefined"的错。下面给你几个可行的解决方案，按推荐程度排序：

方案一：给XYZ套一层DOM容器（最推荐，无依赖） #

既然无法修改XYZ组件，我们可以在它外面包裹一个普通的DOM容器（比如<div>），把ref绑定到这个容器上。只要XYZ的所有渲染内容都在这个容器内部，就能通过容器的DOM元素判断点击范围：

render () {
  return(
    <div ref={node => {this.popContainer = node}}>
      <XYZ className="abc" /> 
    </div>
  )
}

handleClickOutside(e){
  // 先判断容器是否存在，避免空值错误
  if (this.popContainer?.contains(e.target)){ 
    // 点击发生在组件范围内
  } else {
    // 点击发生在组件外部
  }
}

这个方法完全不依赖XYZ组件的实现，兼容性拉满，也符合React的最佳实践。

方案二：使用ReactDOM.findDOMNode（不推荐，API已过时） #

如果不想额外加容器，可以用ReactDOM.findDOMNode()把组件实例转换成对应的DOM元素。不过要注意，这个API在React 16+已经被标记为过时，官方不推荐长期使用：

import ReactDOM from 'react-dom';

// ...

handleClickOutside(e){
  const domNode = ReactDOM.findDOMNode(this.pop);
  // 同样要做空值判断
  if (domNode && domNode.contains(e.target)){ 
    // 点击发生在组件范围内
  }
}

方案三：如果XYZ支持ref转发（最优解，但依赖组件实现） #

如果XYZ组件内部用了React.forwardRef来转发ref（虽然你说无法访问内部，但可以查看它的文档确认），那你可以直接通过ref拿到它的根DOM元素：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 使用createRef替代回调ref
    this.popRef = React.createRef();
  }

  render() {
    return <XYZ className="abc" ref={this.popRef} />;
  }

  handleClickOutside(e) {
    if (this.popRef.current?.contains(e.target)) {
      // 点击发生在组件范围内
    }
  }
}

这个方法最简洁，但前提是XYZ组件支持ref转发——如果它没做的话，这个方法就不生效。

内容的提问来源于stack exchange，提问作者Jagrati