`createPortal`中的`container`只能是portal-root吗？
在React中，createPortal是一个用于将子组件渲染到父组件之外的方法。它可以用于创建一个独立的渲染容器，而不受父组件的限制。
在createPortal中，container参数指定了要渲染子组件的目标容器。通常情况下，container可以是任何有效的DOM元素，而不仅仅是portal-root。
portal-root是一个常见的目标容器，它通常位于HTML文档的顶层，用于渲染独立于其他组件的内容。但是，并不是所有情况下都需要使用portal-root作为container。
在实际开发中，根据具体需求，可以选择不同的容器。例如，可以使用createPortal将子组件渲染到特定的DOM元素中，以实现更灵活的布局和交互效果。
总结起来，createPortal中的container并不只能是portal-root，可以是任何有效的DOM元素，根据具体需求进行选择。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。
- 腾讯云云数据库 MySQL 版：可靠、可扩展的云数据库服务。
- 腾讯云对象存储（COS）：安全、稳定、低成本的云端存储服务。
- 腾讯云人工智能：提供丰富的人工智能服务和解决方案。
- 腾讯云物联网（IoT）：构建智能硬件和物联网解决方案的平台。
- 腾讯云移动开发：提供全面的移动应用开发和运营解决方案。
- 腾讯云区块链：基于区块链技术的一站式解决方案。
- 腾讯云音视频处理：提供音视频处理、分发和播放的服务。
- 腾讯云云原生应用引擎（TKE）：用于构建和管理云原生应用的容器服务。
- 腾讯云网络安全：提供全面的网络安全解决方案，保护业务免受攻击。
请注意，以上仅为腾讯云的一些相关产品，其他品牌商的产品也可能提供类似的功能和服务。
相关·内容
新手在这里做出反应。
我有一个叫做createNotification的帮助器函数，当被调用时，它会使用<ToastNotification /> ()将一个渲染组件插入到container元素中。如果我使用createPortal()，则不会追加任何内容。如果我使用render，尽管有多个触发器，但组件只被添加一次。
有人能帮我弄清楚发生了什么事吗？
谢谢
helpers.js
import { ToastNotification } from "carbon-components-react";
import { render, createPortal } f
浏览 10提问于2021-11-28得票数 0
我尝试通过先挂载来运行测试App，但它会引发错误:目标容器不是DOM元素，指向ReactDOM.createPortal function...so中的第二个参数‘header’，如何确保安装后有标头命名的元素？我尝试了attachTo，通过创建一些document.createElement来创建header元素，但是help...Please没有帮助.
对最新版本的反应和玩笑就像环境一样好。
App.test.js
import React from 'react';
import { mount } from 'enzyme';
import App fr
浏览 0提问于2019-08-30得票数 0
2回答
我正在为弹出窗口编写一个小的，我遇到了一个问题。我的代码结构如下所示：
<MainPopup>
<Popover />
<MainPopup />
弹出结构如下所示：
<KeyboardListener>
<Portal>
// some logic here...
<Portal />
<KeyboardListener/>
<Portal />组件在React.createPortal(...)中打开弹出，<KeyboardListener />组件如下所示(它基
浏览 24提问于2022-08-18得票数 0
回答已采纳
1回答
我想要实现的是在ref中呈现一个ReactPortal，因此在本身内，而不是在外部的一个DOM节点内。
我在-> 上做了一个例子
class Legend extends React.Component {
constructor(props) {
super(props);
}
render() {
if (this.props.useRef)
return ReactDOM.createPortal(<div className="legend">Something</div>, this.props.
浏览 2提问于2018-11-13得票数 2
回答已采纳
2回答
我有一个React应用程序，在这里我要打开一个新的浏览器选项卡点击。问题是我的样式组件的样式不会加载在这个新的浏览器选项卡中。
为什么我的样式组件的样式没有加载在新的浏览器选项卡中？
这是我的浏览器选项卡组件：
import { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
export const NewBrowserTab = ({ children }) => {
const [container, setContainer
浏览 3提问于2021-09-17得票数 0
回答已采纳
4回答
与React 16一起发布的新函数很多，其中之一是ReactDOM.createPortal(child, container) ，它便于直观地从容器中分离出来。
然而，它似乎不仅打破了它的容器，而且打破了我从网络开发的第一天学到的基本的html规则。html允许您将组件从其父组件中呈现出来，并打破了我们期望的createPortal结构约定。
另一方面，我们确实获得了更多的灵活性，现在可以在同级组件或其他组件中呈现DOM。
海事组织，我不认为这是一个很好的交易，以获得更多的灵活性，交易html公约。另外，官方提供的并不能说服我。
我好奇的是:是否有人面临createPortal API必须具
浏览 15提问于2017-11-03得票数 10
回答已采纳
3回答
这是我的react组件结构
<App>
<Body>
<Top>
### //<- Position 1
</Top>
<Middle>
<MyComponent/>
</Middle>
</Body>
</App>
我希望<MyComponent/>在导入时在Position 1上呈现。我试过了ReactDom.createPortal，但我
浏览 7提问于2018-10-28得票数 2
回答已采纳
我正在使用react portal来呈现由父元素呈现的dom元素内部。
import { useRef, useState } from "react";
import { createPortal } from "react-dom";
export default function App() {
const pageTitleRef = useRef(null);
const [page, setPage] = useState(true);
return (
<div className="App">
浏览 4提问于2021-11-01得票数 0
我有一个问题，让反应门户工作。我不明白为什么我会收到错误消息，门户id不是DOM元素，它显然是一个有效的DOM元素。
我有一个沙箱
这里提供了完整的代码。console.log正确地报告该元素是DOM元素，但React正在抛出一个错误。
import "./styles.css";
import { createPortal } from "react-dom";
import { useEffect, useState } from "react";
export default function App() {
const [porta
浏览 8提问于2022-04-10得票数 1
回答已采纳
我试图让ReactDOM.createPortal覆盖容器的内容，我也正在挂载它。然而，在appendChild看来却是如此。
可以重写内容吗？类似于ReactDOM.render
这是我的代码：
import React from 'react';
import { createPortal } from 'react-dom';
class PrivacyContent extends React.Component {
render() {
return createPortal(
<div>
浏览 11提问于2018-12-22得票数 7
回答已采纳
1回答
下面是我的自定义Modal组件的定义： function Modal({ open, set_open, children }) {
const modal_ref = useRef(null);
useEffect(() => {
if (open) {
modal_ref.current.style.display = "block";
} else {
modal_ref.current.style.display = "none";
}
}, [open]);
return Rea
浏览 12提问于2021-07-31得票数 0
回答已采纳
我在有状态组件的呈现方法中使用了ReactDOM.createPortal，如下所示：
class MyComponent extends Component {
...
render() {
return (
<Wrapper>
{ReactDOM.createPortal(<FOO />, 'dom-location')}
</Wrapper>
)
}
}
..。但是，它也能被无状态(功能)组件使用吗？
浏览 6提问于2018-03-22得票数 16
回答已采纳
3回答
从react门户的文档中：
门户的一个典型用例是父组件存在溢出:隐藏或z索引样式，但您需要子组件直观地“释放”其容器。例如，对话框、悬停卡和工具提示。
建议的解决办法是使用：
// this line is rendered in `Portal1` component,
// which is rendered in `Parent1` component.
ReactDOM.createPortal(Child1, Container1)
我不明白它能解决什么问题。为什么让Child1的孩子Container1而不是Parent1有帮助？
我的问题可能不清楚，所以如果它不->
浏览 0提问于2018-12-09得票数 3
回答已采纳
当Post中的按钮单击时，弹出窗口将在根元素的树外部使用createPortal方法呈现。
使用此代码弹出呈现两次。
我只想渲染一次。
这是父级Post组件。
import { useState } from 'react';
import PopupModal from './PopupModal/PopupModal';
import './Post.css';
const Post = (props) => {
const postData = props;
const [isOpen
浏览 6提问于2022-04-18得票数 0
我正在使用react。我已经创建了一个门户组件。当我在门户中封装一个模型时，我在VsCode中得到了以下错误。如果有人知道如何解决这个问题，请让我知道。
错误描述
Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & ReactNode'.
Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes&
浏览 4提问于2021-09-05得票数 0
1回答
我一直试图找到一个解决方案来测试这个相当直截了当的门户，没有多少运气。安装似乎是我可以用酶的解决方案，我正在使用的单元测试，但没有一个解决方案，我发现似乎对我有用吗？任何帮助都将不胜感激。
门户
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import UGCGalleryOverlay from './UGCGalleryOverlay';
cons
浏览 0提问于2018-10-08得票数 1
我创建了一个WindowPortal来打开许多新的外部窗口/选项卡。 https://codesandbox.io/s/modest-goldwasser-q6lig?file=/src/App.js 如何在createPortal函数中将道具传递给props.children？ 我想通过newWindow作为一个道具来处理新窗口的大小调整。 import React, { useState, useRef, useEffect, useCallback, Children, cloneElement } from "react";
import { createPortal
浏览 5提问于2021-04-29得票数 3
我有一个父组件，它有一个按钮，当单击该按钮时，将在React.CreatePortal控件中打开一个新组件。 在该CreatePortal组件上，我有一个类似如下的按钮： return (
ReactDOM.createPortal(
<div id="portal_Game">
<div><button onClick={jump}> JUMP </button></div> 但是“jump”函数在父控件上。 在门户中，它不被识别。 有没有一种方法可以
浏览 52提问于2020-07-21得票数 0
回答已采纳
我想要获取带有className“innerHTML”的div的编辑器，我是通过useContext传入的。收到innerHTML后，我会将它附加到一个带有className "getcontent“的div中。目前，我的代码显示一条错误消息" error : Target container is not a DOM element“。我已经创建了一个Codesandbox。提前感谢！
浏览 15提问于2020-03-31得票数 0
我试图在一个元素渲染到dom之前测量它的高度。我有下面的mesureElement()函数，它只给我宽度(浏览器宽度)，高度总是为0。
我做错了什么？
import React from "react";
import ReactDOM from "react-dom";
const containerStyle = {
overflow: "hidden",
display: "inline-block"
};
const measureElement = () => {
const conta
浏览 0提问于2018-12-25得票数 1
此追加销售组件的目的是在特定区域(门户)中呈现某些内容。因此，它将接受一个DOM元素，并对其执行createPortal。问题是widgetDom总是为空，并导致createPortal没有机会呈现。
在消费者中，我使用useRef并将widgetRef.current传递给向上销售组件。我期望当widgetRef附加真正的元素时，widgetRef.current更改将导致追加销售组件重新呈现，但这并没有发生。
你能看看下面的代码或者吗？谢谢!
const Upsell: React.FC<{ widgetDom: HTMLElement | null }> = ({ widge
浏览 1提问于2020-11-06得票数 0
1回答
我想要一个没有地址栏的弹出窗口。我看到了类似的帖子，但这并没有解决我的问题。然而我在youtube上看到了一段视频，他在windows命令run chrome.exe --app=https://google.com上输入了这段视频。窗口输出没有地址栏。能不能有人教我怎么把这个放在我的代码里反应js。
我已经在这里构建了我的组件：
import React, { useEffect, useRef, useState } from "react";
import { Button } from '@zendeskgarden/react-buttons';
im
浏览 7提问于2022-01-18得票数 0
我使用react-test-renderer和Jest测试反应组件。但是如果我测试一个像这样的react模式对话框：
describe('Dashboard', function () {
let dashboard;
beforeEach(async () => {
testRenderer = TestRenderer.create(<MemoryRouter><Route component={Dashboard} /></MemoryRouter>);
dashboard = testRenderer.r
浏览 4提问于2019-05-22得票数 7
这是backdrop.tsx：
interface BacdropProps {
open?: string;
onClick: () => void;
}
const Backdrop: React.FC<BacdropProps> = (props) => {
let container: HTMLDivElement | null = null;
if (typeof window !== "undefined") {
const rootContainer = document.createElement("di
浏览 7提问于2021-01-21得票数 1
回答已采纳
1回答
我有简单的反应性门户组件。首先，我是在类组件中编写的，所有这些都运行得很好。但我决定把它重写成功能组件。在此之后，门户仅在div#portal内部生成div，而在内部不生成子级。我不知道哪里是错误。
// Functional Component
import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
const Lightbox = ({ children }) => {
const portalRoot = document.getE
浏览 1提问于2020-06-24得票数 0
回答已采纳
2回答
我在我的React应用程序中使用Next JS，在门户中创建模式时遇到了问题，它抛出了一个错误‘目标容器不是DOM元素。’，这是我的代码。 import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classes from './listModal.scss';
const EditorListModal = (props) => {
le
浏览 134提问于2019-12-18得票数 11
回答已采纳
我对createPortal函数有一个问题。当我使用"Modal"，然后通过改变状态，整个"Modal“组件将被呈现。你能帮我避免这件事吗？因此，当我在Cart组件中注释出Modal包装时(正如我在下面所做的那样)，它按照我的预期工作，但是使用Modal包装时，当状态发生变化时，不会重新呈现组件，而是始终重新呈现整个Modal组件。
下面是带有createPortal函数的Modal组件：
import React from 'react';
import { createPortal } from 'react-dom';
import
浏览 4提问于2022-03-29得票数 0
我使用Portal组件创建门户并将其添加到文档中。某些组件(在我的实际用例中是工具提示)是门户的一个子组件，需要读取它的宽度(在我的例子中，检查工具提示是否在窗口之外，并在必要时重新定位)，然后使用useLayoutEffect重新呈现自己。
我的问题是在元素呈现之前调用useLayoutEffect的回调，所以当我执行类似于getBoundingClientRect()的操作时，宽度仍然是0。如果我将组件移出门户，那么它将正确工作。
有关部分：
const Portal = ({ children }) => {
const [container] = useState(() =
浏览 19提问于2022-05-10得票数 0
回答已采纳
错误：
TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function
Modal.js:14
11 |
12 |
13 | function Modal(props) {
> 14 | return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
15 | }
16 |
17 |
代码：
import React from &#
浏览 10提问于2020-03-09得票数 12
有一个用getElementById实现的功能组件，需要更新它才能使用useRef钩子。
原始代码：
import React, { useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
const MyComponent: React.FunctionComponent<MyComponentProps> = ({
myDefaultElement = 'default-element',
}) => {
浏览 2提问于2021-11-17得票数 3
我正在迁移一个旧的"jQuery“应用程序，添加了一些React组件。我有一些在DOM中添加一些元素的JS/jQuery代码。例如，我想用一个新的Item组件来代替它，创建多个实例并将它们添加到同一个容器中。我需要获得真正的DOM元素来操作它(使用旧的JS/jQuery代码)。 我找到了这个解决方案： const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container)) 但容器内容被新的Item替换，并添加了许多项，只有最后一个项最终在容器中。 我已经尝试过p
浏览 12提问于2019-01-04得票数 0
1回答
我试图将用于无限滚动器(用于缓存昂贵的组件)。到目前一切尚好。
为了简洁起见，我生成一个InPortals列表来激活它们，并保持它们的最新--没有为每个div包装器。
这是否存在内存泄漏的风险，或者是否响应清除了列表迭代中没有包含的InPortals？
是否有一种使用ReactDOM.createPortal(children, container, key包括关键参数( InPortal )的方法？我认为这将有助于反应，保持活跃门户的清晰列表
浏览 16提问于2022-06-24得票数 0
因此，我使用ReactDOM.createPortal在常规DOM位置之外呈现一个元素。我必须这样做，因为我正在与一个创建自己的元素的库交互(在我的作用域之外)，并且我必须将我的一个DOM元素放在它们的内部。
我使用createPortal得到的是：
<div class="target">
<div />
<div class="myDiv" />
</div>
我想要实现的是：
<div class="target">
<div class="m
浏览 0提问于2018-10-05得票数 6
1回答
我想测试一个使用react-modal构建的组件。该库使用门户将实际的模式挂载到父级之外。酶中的find方法只查看从包装器元素开始的树，该包装器元素不包括open模式。
据我所知，直到最近，门户还没有得到官方的支持，但从React 16和Enzyme 3开始，它们应该是()
看起来在DOM中可以从安装了酶的组件访问打开的门户，但要找到它并不容易。我见过使用refs (我不想添加它只是为了测试)和document.querySelector (比处理ReactWrapper更糟糕)的策略。
最有希望的策略声称可以使用foundEl.node.portal ( )从门户的父级访问门户，但我并没有让
浏览 2提问于2018-01-20得票数 4
我正在使用NextJS，并且正在尝试测试ClientPortal组件。我正在使用Jest和React测试库进行测试。 下面是ClientPortal组件： import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
export default function ClientPortal({ children, selector }) {
const ref = useRef();
const [mounted, setM
浏览 40提问于2021-10-13得票数 0
回答已采纳
我对这部分应用程序的目标是，当用户检索信息时，它会显示在外部窗口中。我使用了一个单独的组件，但如果我打开第二个窗口，第一个门户中的内容就会消失。我以为这跟州政府有关。因此，我用useReducer重写了父容器，不再引用子组件，而是尝试在父组件中使用createPortal。虽然窗口打开得很好，状态也更新得很好，但门户永远不会将内容呈现给第一个子级。下面的代码。 import React, {useEffect, useState, useReducer} from "react";
import fiostv from "../api/fiostv";
imp
浏览 8提问于2021-01-11得票数 0
回答已采纳
1回答
测试模态组件在另一个组件中
、、、、
我正在试着测试一个应该打开它的模式的组件。模态是这个组件的一部分，但它是用createPortal()呈现的。我首先检查文档中是否存在模式，然后单击按钮，如果它出现了，但测试失败。
构成部分：
const [openModal, setOpenModal] = useState(false);
function Component() {
return (
<div>
<button onClick={() => setOpenModal(true)}>Open Modal</button>
<Modal o
浏览 19提问于2022-05-09得票数 1
我有一个包含以下代码的content.tsx文件： import React from "react";
import {createPortal} from 'react-dom';
import Text from './Text';
console.log(`Content script...`);
createPortal(
<Text/>,
document.body
); "Text“组件代码： import React from 'react';
const Text =
浏览 214提问于2021-11-15得票数 0
回答已采纳
我正在尝试使用门户来呈现一个模型，它在我的应用程序和童话簿中都能很好地工作，但是一旦它被添加到Story快照中，我就会遇到问题。
第一个问题是模拟ReactDOM的createPortal API。我是这样做的：
ReactDOM.createPortal = element => element;
如果没有添加这一点，我将得到以下错误：
错误: Uncaught : parentInstance.children.indexOf不是函数
我找到了这个解决方案，。
这解决了这个问题，但是当组件使用门户时，它在试图追加子节点时失败。它找不到‘模式-根’组件，因此不能附加元素。我不知
浏览 3提问于2018-09-04得票数 8
我正在寻找一种使用ReactDOM.render在react路由器中创建Link的方法。设置或多或少如下所示： const router = (
<div>
<Router>
<Route path="/map" component={Map}/>
</Router>
</div>
); Map.jsx的相关部分如下所示： const MapPopup = () => {
return (
<Link to={`/map/add`} />
)
}
浏览 20提问于2019-05-20得票数 4
回答已采纳
假设如下所示： import { render, createPortal } from "react-dom"
const MyPage = () => {
const handler = () => {
render(<MyModalDialog />, document.body)
}
return (
<div>
<button onClick={handler}>Click me</button>
</div>
)
} 我可以有条件地将我的
浏览 10提问于2021-09-25得票数 0
1回答
目前，我正在使用react-google-maps进行一个个人项目，在地图上显示自定义按钮时遇到了困难。我想要创建一个菜单按钮，在地图上盘旋，就像的左上角(搜索栏)。
根据的意思，您必须创建一个div，并使用下面的命令将其放在地图的特定一侧。
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(<div>);
但是，我不能让它很好地与React一起工作，因为Google文档都是普通的js。哪里是放置这一行代码的好地方？我知道在香草js里你几乎可以把它放在任何地方。
我还查看了，但似乎这个特定的用例并不是在API中实
浏览 0提问于2020-05-18得票数 4
2回答
我在我的项目中使用preact (一个小版本的react)。
在更新到preactX版本之前，我使用的是这样的Modal组件，它没有问题，这是我的Modal组件的样子：
import { Component } from 'preact';
import Portal from 'preact-portal';
export default class Modal extends Component {
componentWillReceiveProps({ isOpen }) {
if (this.state.isOpen !==
浏览 1提问于2020-05-16得票数 0
回答已采纳
我试图在POST处理时呈现一个加载通知模式。使用createPortal看起来应该很简单，但是模式从来没有显示过。
我在索引中添加了一个id为modal的div：
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<div id="modal"></div>
</body>
浏览 27提问于2020-02-14得票数 2
我正在使用一个非常严格的TS和ESLint版本。
我从这里的文档中撕开了这个门户：
我将代码修改如下：
import React, { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'
interface Props {
children?: ReactNode
portalId: string
}
export const Portal: React.FC<Props> = ({ children, portalId
浏览 8提问于2022-09-22得票数 2
回答已采纳
1回答
我试图从零开始创建一个react组件。当另一个模式打开时，我想添加关闭模式的功能。
我知道如何解决的逻辑(我想我知道)，但不能实现它。我的方法是使用上下文，其中我存储当前模式打开( currentModal )，如果打开另一个模式，它将检查是否存在currentModal，如果是，它将关闭它。
到目前为止，我有模态组件：
export function Modal({title, isOpen, children, onClose}){
return(
createPortal(
<trds-modal class={isOpen ? '
浏览 4提问于2022-11-01得票数 0
我目前正在React中创建一个象棋游戏，用于学习目的。我遇到的问题是将React组件从一个父组件移动到另一个父组件，同时保留道具。我读过关于ReactDOM.createPortal()的文章，但我似乎不能让它工作。
为了说明这个问题，我创建了一个包含两个容器的简单React应用程序，其中一个容器中有一个按钮。目标是在按钮被单击时将其移动到另一个容器中。
export default class ParentLeft extends React.Component{
render(){
return(
<div className="container&
浏览 0提问于2019-08-05得票数 0
我使用的是React Native，它附带了支持的React 16 alpha版本。在浏览器和访问DOM时，我们可以使用id或类从组件/文件层次结构中的任何位置访问元素，如下所示：
const modalRoot = document.getElementById('modal-root');
并将其传递给createPortal(child, container)容器arg。而不是容器应该是DOM元素：
第二个参数(容器)是一个DOM元素。
这个函数也是ReactDOM的一种方法，它在React本机中不存在。
是否有办法在中实现类似的功能？
用例：
我想在我的应用程序
浏览 5提问于2017-09-30得票数 19
我正在创建我的第一个react项目，我正在使用GitHub应用程序接口获取用户并首先在卡片视图中显示它们，然后单击更多按钮到任何配置文件我想在react中使用portals创建一个模式，直到现在我能够创建一个模式，但现在我不知道如何获得数据到那个模式组件 这是我的App.js import React, { Fragment, Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
impor
浏览 18提问于2019-10-04得票数 0
在React门户教程https://reactjs.org/docs/portals.html中，当使用createPortal创建门户时，它会创建一个新的分离的DOM节点this.el，并使用此元素创建门户。为什么我们需要这一步？我们可以只使用modalRoot创建门户吗
浏览 11提问于2019-12-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
