我为所有场合制定了解决方案。

你应该使用一个高阶组件来包装你想要监听的组件。

这个组件示例只有一个属性：“onClickedOutside”，它接收函数。

ClickedOutside.js

import React, { Component } from "react";

export default class ClickedOutside extends Component {
  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    // IF exists the Ref of the wrapped component AND his dom children doesnt have the clicked component 
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      // A props callback for the ClikedClickedOutside
      this.props.onClickedOutside();
    }
  };

  render() {
    // In this piece of code I'm trying to get to the first not functional component
    // Because it wouldn't work if use a functional component (like <Fade/> from react-reveal)
    let firstNotFunctionalComponent = this.props.children;
    while (typeof firstNotFunctionalComponent.type === "function") {
      firstNotFunctionalComponent = firstNotFunctionalComponent.props.children;
    }

    // Here I'm cloning the element because I have to pass a new prop, the "reference" 
    const children = React.cloneElement(firstNotFunctionalComponent, {
      ref: node => {
        this.wrapperRef = node;
      },
      // Keeping all the old props with the new element
      ...firstNotFunctionalComponent.props
    });

    return <React.Fragment>{children}</React.Fragment>;
  }
}

基于Tanner Linsley在2020年夏威夷联合会议上的精彩演讲：

使用OuterClick API

const Client = () => {
  const innerRef = useOuterClick(ev => {/*event handler code on outer click*/});
  return <div ref={innerRef}> Inside </div> 
};

实施

function useOuterClick(callback) {
  const callbackRef = useRef(); // initialize mutable ref, which stores callback
  const innerRef = useRef(); // returned to client, who marks "border" element

  // update cb on each render, so second useEffect has access to current value 
  useEffect(() => { callbackRef.current = callback; });
  
  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
    function handleClick(e) {
      if (innerRef.current && callbackRef.current && 
        !innerRef.current.contains(e.target)
      ) callbackRef.current(e);
    }
  }, []); // no dependencies -> stable click listener
      
  return innerRef; // convenience for client (doesn't need to init ref himself) 
}

下面是一个工作示例：

/*自定义挂钩*/函数useOuterClick（回调）{const innerRef=useRef（）；const callbackRef=useRef（）；//在ref中设置当前回调，然后第二个useEffect使用它useEffect（（）=>{//useEffect包装器对于并发模式是安全的callbackRef.current=回调；});使用效果（（）=>{document.addEventListener（“单击”，handleClick）；return（）=>document.removeEventListener（“单击”，handleClick）；//从ref中读取最近的回调和innerRefdom节点函数句柄Click（e）{如果(内部参考当前&&回调参考当前&&!innerRef.current.contains（e.target）) {callbackRef.current（e）；}}}, []); // 无需回调+innerRef-depreturn innerRef；//返回参考；客户端可以省略`useRef`}/*用法*/常量客户端=（）=>{const[counter，setCounter]=useState（0）；const innerRef=useOuterClick（e=>{//调用处理程序时，计数器状态是最新的alert（`Clicked outside！Increment counter to${counter+1｝`）；设置计数器（c=>c+1）；});返回(＜div＞<p>点击外面</p＞<div id=“container”ref={innerRef}>内部，计数器：｛counter｝</div></div>);};ReactDOM.render（<Client/>，document.getElementById（“root”））；#容器｛边框：1px纯红色；填充：20px；｝<script src=“https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js“integrity=”sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=“crossrorigin=”匿名“></script><script src=“https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js“integrity=”sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGw=“crossrorigin=”匿名“></script><script>var｛useRef，useEffect，useCallback，useState｝=反应</script><div id=“root”></div>

要点

useOuterClick利用可变引用提供瘦客户端API包含组件（[]deps）的生命周期的稳定单击侦听器客户端可以设置回调，而无需使用callback将其记忆回调主体可以访问最新的属性和状态-没有过时的闭包值

（iOS的侧注）

iOS通常只将某些元素视为可点击的。要使外部单击有效，请选择一个不同于文档的单击侦听器-不向上包括正文。例如，在React根div上添加一个监听器，并扩展其高度，如height:100vh，以捕捉所有外部点击。来源：quicksmod.org

我在discuss.reactjs.org上找到了一个解决方案，这要感谢Ben Alpert。单击我的树中的一个组件会导致一个重新阅读程序，在更新时删除了单击的元素。由于React的重读发生在调用文档正文处理程序之前，因此元素未被检测为“在”树中。

解决方案是在应用程序根元素上添加处理程序。

主要：

window.__myapp_container = document.getElementById('app')
React.render(<App/>, window.__myapp_container)

组件：

import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

export default class ClickListener extends Component {

  static propTypes = {
    children: PropTypes.node.isRequired,
    onClickOutside: PropTypes.func.isRequired
  }

  componentDidMount () {
    window.__myapp_container.addEventListener('click', this.handleDocumentClick)
  }

  componentWillUnmount () {
    window.__myapp_container.removeEventListener('click', this.handleDocumentClick)
  }

  /* using fat arrow to bind to instance */
  handleDocumentClick = (evt) => {
    const area = ReactDOM.findDOMNode(this.refs.area);

    if (!area.contains(evt.target)) {
      this.props.onClickOutside(evt)
    }
  }

  render () {
    return (
      <div ref='area'>
       {this.props.children}
      </div>
    )
  }
}

我使用了这个模块（我与作者没有关联）

npm install react-onclickout --save

const ClickOutHandler=require（'act-on-clickout'）；ExampleComponent类扩展React.Component{单击退出（e）{if（hasClass（e.target，'忽略我'））返回；alert（'用户在组件外部单击！'）；}render（）{返回(<ClickOutHandler onClickOut=｛this.onClickOut｝><div>点击我的外部</分区></ClickOutHandler>);}}

它做得很好。

我知道这是一个老问题，但我不断遇到这个问题，我很难用简单的格式来解决这个问题。所以，如果这能让任何人的生活变得轻松一点，请使用airbnb的OutsideClickHandler。这是一个最简单的插件，无需编写自己的代码即可完成此任务。

例子：

hideresults(){
   this.setState({show:false})
}
render(){
 return(
 <div><div onClick={() => this.setState({show:true})}>SHOW</div> {(this.state.show)? <OutsideClickHandler onOutsideClick={() => 
  {this.hideresults()}} > <div className="insideclick"></div> </OutsideClickHandler> :null}</div>
 )
}

您只需在主体上安装一个双击处理程序，并在此元素上安装另一个。在该元素的处理程序中，只需返回false以防止事件传播。因此，当双击发生时，如果它在元素上，它将被捕获，并且不会传播到主体上的处理程序。否则它会被身体上的处理程序抓住。

更新：如果你真的不想阻止事件传播，你只需要使用closest来检查点击是发生在你的元素还是他的一个孩子身上：

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).on('click', function(event) {
    if (!$(event.target).closest('#div3').length) {
    alert("outside");
    }
});
</script>
</head>
<body>
    <div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
    <div style="background-color:red;width:100px;height:100px;" id="div2"></div>
    <div style="background-color:green;width:100px;height:100px;" id="div3"></div>
    <div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
    <div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>

更新：不带jQuery:

<html>
<head>
<script>
function findClosest (element, fn) {
  if (!element) return undefined;
  return fn(element) ? element : findClosest(element.parentElement, fn);
}
document.addEventListener("click", function(event) {
    var target = findClosest(event.target, function(el) {
        return el.id == 'div3'
    });
    if (!target) {
        alert("outside");
    }
}, false);
</script>
</head>
<body>
    <div style="background-color:blue;width:100px;height:100px;" id="div1"></div>
    <div style="background-color:red;width:100px;height:100px;" id="div2"></div>
    <div style="background-color:green;width:100px;height:100px;" id="div3">
        <div style="background-color:pink;width:50px;height:50px;" id="div6"></div>
    </div>
    <div style="background-color:yellow;width:100px;height:100px;" id="div4"></div>
    <div style="background-color:grey;width:100px;height:100px;" id="div5"></div>
</body>
</html>