大教堂含有或compareDocumentPosition模拟在反应

嗯，我有一个稍微不同的问题。父母包含孩子，我们可以从事件冒泡中知道。

门户网站：

class Portal extends React.Component { 
    el: any; 
    constructor(props: any) { 
    super(props); 
    this.el = document.createElement('div'); 
    } 
    componentDidMount() { 
    document.body.appendChild(this.el); 
    } 
    componentWillUnmount() { 
    document.body.removeChild(this.el); 
    } 
    render() { 
    return ReactDOM.createPortal(
     this.props.children, 
     this.el, 
    ); 
    } 
} 

儿童：

class Child extends React.Component { 
    render() { 
    return <div className="child">Lorem Ipsum</div>; 
    } 
} 

家长：

class Parent extends React.Component { 
    target: any; 
    componentDidMount() { 
    document.addEventListener('mousedown', this.onDocMouseDown); 
    } 
    componentWillUnmount() { 
    document.removeEventListener('mousedown', this.onDocMouseDown); 
    } 
    onDocMouseDown = (e: any) => { 
    const target = e.target; 
    const isChild = this.target === target; 
    if (isChild) { 
     // do something 
    } 
    this.target = null; 
    }; 
    onElemMouseDown = (e: any) => { 
    this.target = e.target; 
    }; 
    render() { 
    return (
     <div className="parent" onMouseDown={this.onElemMouseDown}> 
     <Portal> 
      <Child /> 
     </Portal> 
     </div> 
    ); 
    } 
} 

从阵营Portal文档：

从门户内触发的事件将传播到含有阵营树在 祖先，即使这些元素不会在 DOM树的祖先

在父类中，我们对文件有事件“鼠标按下”手柄和包装div。当mousedown被解雇时，首先将工作包装手柄。我们将它保存到一些变量，如'this.target'。然后事件冒泡到文档并处理文档，我们可以将'e.target'与'this.target'相等。因此，我们可以知道这是父母的目标还是不是。