大教堂含有或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'相等。因此，我們可以知道這是父母的目標還是不是。