实现 ReactDOM.createPortal 时的问题（react 16 功能）

Posted 2023-02-21

【中文标题】实现 ReactDOM.createPortal 时的问题（react 16 功能）

【英文标题】：Issue when implementing ReactDOM.createPortal (react 16 feature)

【发布时间】：2018-11-02 16:06:00

【问题描述】：

为了清楚起见，假设我有 3 个组件：<Child>, <Parent>, <GrandParent>

我正在尝试在<GrandParent> 内渲染<Child>，而不渲染<Parent>（从中调用<Child>）。

parent.js

class Parent extends Component 
  ...
  componentDidMount() 
    return (
      <Route ... component= Child  />
    );
  

  render() 
  // the <Route> element is rendered here
  

当单击<Parent> 中的链接时，我希望<Parent> 卸载并<Child> 在<GrandParent> 中呈现，这是 React 新功能“门户”应该实现的。

从文档中，它应该如何实现：

ReactDOM.createPortal(componentToRender, elementToRenderInto);
// Hence in my case:
ReactDOM.createPortal(<Child />, document.getElementById('grand-parent'));

但我不确定如何/在哪里使用这段代码。我尝试的所有内容都在<Parent> 旁边呈现<Child>，这不是我想要的。非常欢迎有关该主题的提示/文档/示例

【问题讨论】：

你能在这里分享整个代码吗？共享的代码有点模棱两可。 createPortal 仅在 elementToRenderInto 内附加 componentToRender。它不会删除任何元素。在您的情况下，我猜 Parent 元素存在于 GrandParent 元素中

实际上代码更复杂，所以我不确定共享所有内容是否会提高可读性。但是，您是对的，它缺少一个重要的细节：Parent 不存在于 GrandParent 中。

了解这个场景会很有趣，你最终想要实现什么？

【参考方案1】：

如果我做对了，祖父组件必须获取对底层 DOM 节点的引用并将其传递给parent，然后parent 使用child 呈现一个门户。

我想这可能是您想要实现的目标：

class GrandParent extends React.Component 
  state = ;
  getRef = that => this.setState( self: that );
  render() 
    return (
      <div ref=this.getRef style=>
        +
        <Parent parent=this.state.self>
          <Child />
        </Parent>
        +
      </div>
    );
  


class Parent extends React.Component 
  render() 
    if (this.props.parent)
      return createPortal(this.props.children, this.props.parent);
    return (
      <div>
        parent<Child />
      </div>
    );
  


class Child extends React.Component 
  render() 
    return <div>child</div>;
  

codesandbox