个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 React 16 并需要门户，但无法找到有关此功能的任何文档。有谁知道如何使用这个吗？
https://github.com/facebook/react/pull/10675
感谢您的建议。
最佳答案
React v16 几个小时前刚刚发布(耶!!)，正式支持 Portal .
什么是门户？自从那里存在多久了？
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
Portal在 React 社区中并不是新概念。许多库都支持这种功能。例如react-portal和 react-gateway .
渲染任何 React 应用程序时会发生什么？
通常，在渲染任何 React 应用程序时，会使用单个 DOM 元素来渲染整个 React 树。
class HelloReact extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
ReactDOM.render(<HelloReact />, document.getElementById('root'));
正如你所看到的，我们正在将 React 组件渲染到一个 id 为 root 的 DOM 元素中。 .
什么是 Portal？为什么需要它？为什么它在那里？
门户是一种在父组件的主 DOM 层次结构之外渲染 React 子组件的方法，不会丢失 React 上下文。我之所以强调它是因为非常受欢迎的库，例如 react-router , redux大量使用 react 上下文。因此使用 Portal 时上下文可用性非常有帮助。
根据 react文档，
A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltip.
因此，通过门户，您可以在需要时将并行 react 树渲染到另一个 DOM 节点上。即使它是在不同的 DOM 节点中渲染的，父组件也可以捕获未捕获的事件。看这个codepen文档本身提供了。
下面的例子应该会给你更多的想法:
// index.html
<html>
<body>
<div id="root"></div>
<div id="another-root"></div>
</body>
</html>
// index.jsx
const mainContainer = document.getElementById('root');
const portalContainer = document.getElementById('another-root');
class HelloFromPortal extends React.Component {
render() {
return (
<h1>I am rendered through a Portal.</h1>
);
}
}
class HelloReact extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
{ ReactDOM.createPortal(<HelloFromPortal />, portalContainer) }
</div>
);
}
}
ReactDOM.render(<HelloReact />, mainContainer);
https://codesandbox.io/s/62rvxkonnw
您可以使用devtools检查元素并看到<h1>I am rendered through a Portal.</h1>被渲染在 #another-root 内标签，而 <h1>Hello World</h1>被渲染在 #root 内标签。
希望这有帮助:)
更新:回答 @PhillipMunin's comment 。
What is the different between
ReactDOM.renderandReactDOM.createPortal?
即使通过门户呈现的组件在其他地方呈现(当前容器根目录之外)，它仍然作为同一父组件的子组件存在。 (谁调用了 ReactDOM.createPortal )因此子级上的任何事件都会传播到父级。 (Ofc，如果您手动停止事件的传播，这将不起作用。)
可以在通过门户呈现的组件内部访问相同的上下文。但当我们这样做 ReactDOM.render 时情况并非如此直接。
我创建了另一个演示来说明我的观点。 https://codesandbox.io/s/42x771ykwx
关于javascript - 如何在 React 16 中使用 ReactDOM.createPortal() ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46393642/
25
4
0
错误: TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function Moda
const ref = useRef(null); return ( <> {ref.current !== null && createPortal(Hell
所以我正在使用 ReactDOM.createPortal 在其正常 DOM 放置之外呈现元素。我必须这样做，因为我正在与创建它自己的元素(在我的范围之外)的库进行交互，并且我必须将我的 DOM 元素
我正在使用 React 16 并需要门户，但无法找到有关此功能的任何文档。有谁知道如何使用这个吗？ https://github.com/facebook/react/pull/10675 感谢您的建
为了清楚起见，假设我有 3 个组件:, , 我正在尝试渲染 在 内, 没有渲染 (从中调用 )。 parent.js class Parent extends Component { ...
我正在开发一个 React 应用程序并尝试使用 ReactDOM.createPortal()将 html 内容添加到组件外部的 div(称为 ToDoItem)。 {ReactDOM.createP
我正在尝试获取 ReactDOM.createPortal要覆盖容器的内容，我也正在安装它。但是它似乎附加了Child。 是否可以覆盖内容？类似于 ReactDOM.render ? 这是我的代码:
我明白 it's probably a bad idea至 ReactDOM.render()进入 document.body。但是使用 ReactDOM.createPortal() 有什么问题吗？
我一直在绞尽脑汁试图弄清楚如何完成一些我认为很简单的事情(我知道......) 目标是获得一个非常最小和可重用的模态组件，我可以使用触发按钮或w/e在某种HOC中为其设置动画。 我正在使用 creat
新手在这里 react 。 TLDR:我有一个名为 createNotification 的辅助函数当调用时会插入 组件进入 container使用 render() 的元素。如果我使用 create
我使用 React 钩子(Hook)创建了一个应用程序。我有一个辅助函数 onClickOutsideHook(ref, callback)触发 callback当您在提供 ref 的组件外部单击时使
我的 React 应用程序中有这样的代码: import React from 'react'; import ReactDOM from 'react-dom'; import ComponentB
我正在尝试使用 slate-react 制作一个编辑器。我制作了悬停菜单，但 Next.js 渲染存在样式问题。所以我尝试在 Next.js 的默认 ID __next 下使用 React creat
我有一个组件，我在其中渲染了一些按钮。每个按钮都应该有它的工具提示。我想让工具提示在我 :hover 按钮时出现。但是因为我的工具提示不仅可以包含文本，所以我不能使用气球之类的东西，也不能只用 css
我是一名优秀的程序员,十分优秀！