كيفية معرفة أن click event حدثت خارج مكون معين في React؟

يمكنك عمل هذا عن طريق ال ref 
 

import React, { Component } from 'react';

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

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

	// عند الضغط بالماوس عل الصفحة 
    handleClickOutside = (event) => {
      // نتحقق هل العنصر لديه حدث mousedown أم لا
        if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
          // إذا لم يحتوي على الحدث
            alert('لقد قمت بالنقر خارج المحتوى الخاص بي');
        }
    }

    render() {
      // نقوم بإعطاء العنصر ref
        return <div ref={ref => this.wrapperRef =ref }>{this.props.children}</div>;
    }
}

يمكنك استخدام مرجع متعلق بمكون وبمساعدة خطافات react الامر يصبح سهل جدا 

import React, { useRef, useEffect } from 'react';

export default function App() {
  const node = useRef();

  const handleClick = (e) => {
    if (node.current.contains(e.target)) {
      console.log('تم الضغط داخل المكون');
      return;
    }
    console.log('تم الضغط خارج المكون');
  };

  useEffect(() => {
    // اضافة عند التشغيل
    document.addEventListener('mousedown', handleClick);
    
    // ازالة عند توقف التشغيل
    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, []);

  
  return <div ref={node}>...........</div>;
}