时间戳

首页 > 解决方案 > 在 React 中使用 refs 和 portals 从子级渲染到父级

reactjs - 在 React 中使用 refs 和 portals 从子级渲染到父级

问题描述

我想使用在父组件上创建的 ref 将子组件的反应门户呈现到父组件。我试图让它工作，但在我的实验中ReactDOM.createPortal() 未能渲染任何东西。

这是我要完成的示例： https ://codesandbox.io/s/0qk3pxrkwn

请注意，永远不会渲染文本“我将在我的父母中渲染”。

我在这里做错了吗？

上下文是我的子组件是一个下拉列表，而我的父组件将子组件包装在overflow: hidden其中以实现一些时髦的样式。要显示子项的下拉部分，我需要在父项中呈现该内容。对于这个用例，门户网站似乎是一个非常好的模式。

标签： reactjs

解决方案

来自官方门户文档：

门户提供了一种一流的方式来将子级呈现到存在于父组件的 DOM 层次结构之外的 DOM 节点中。

如果您仍然想这样做，请在父组件中执行类似的操作：

<ParentComponent>
  <ChildWhichCreatesPortal />
  <PortalContainer />
</ParentComponent>

PortalContainer永远不会重新渲染的东西在哪里：

class PortalContainer extends React.Component {
  shouldComponentUpdate() {
    return false
  }

  render() {
    <div id="id-to-find-dom-node"></div>
  }
}

我上面指定的方式应该可以工作，但我没有尝试

推荐阅读