reactjs - Dom 包含或比较 React 中的文档位置模拟

Question

我有一些组件包含另一个门户组件，例如

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

但是在真实的 dom 上它看起来像:

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

我需要知道，子组件的 native 节点是父组件的子节点。

Answer 1

嗯，我遇到了一个稍微不同的问题。并且Parent包含Child，我们可以通过事件冒泡知道。

门户:

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,
    );
  }
}

child :

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>
    );
  }
}

来自 React Portal 文档:

An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree

在父类中，我们在文档和包装 div 上有事件“mousedown”的句柄。当 mousedown 被触发时，首先将工作包装器句柄。我们将其保存到像“this.target”这样的变量中。然后事件冒泡到文档并在文档句柄中我们可以将“e.target”与“this.target”相等。据此我们可以知道Parent中是否有这个目标。