• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

reactjs 来源:Феликс Юсупов 5次浏览

我有一个包含像大教堂含有或compareDocumentPosition模拟在反应

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

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

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

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


===========解决方案如下:

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

门户网站:

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


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)