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

Question

我有一个包含像

<Parent> 
    <Portal> 
     <Child>Lorem Ipsum</Child> 
    </Portal> 
</Parent> 

但在实际DOM另一portaled组件一些部件看起来就像：

<div class="parent"></div> 
<div class="child">Lorem Ipsum</div> 

我需要知道，本地节点Child组件的子项是Parent的子项。

Answer 1

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

门户网站：

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'相等。因此，我们可以知道这是父母的目标还是不是。