blocks|key|22323|text|在升级到Reactive18之后，我在使用react-bootstrap@v0.33.1组件时遇到了同样的问题，警告消息建议迁移到使用门户。因此，我实现了一个CustomOverlayTrigger组件，它利用门户，并引用React的门户文档来实现它。请注意，此解决方案适用于OverlayTrigger的引导程序3使用(react-bootstrap+v0.33.1)。似乎后来版本的react引导程序摆脱了使用ReactDOM.unstable_renderSubtreeIntoContainer。如果您无法迁移到更晚的版本(就像我一样)，这个解决方案将对这个用例有所帮助。我还没有彻底检查其他组件是否使用了不推荐的方法，但是方法可能是相同的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|22324|首先，我复制了位于OverlayTrigger的这里组件代码的原始源代码。您需要清理导入，并在代码中包括位于createChainedFunction的这里的utils函数。|22325|然后，我根据React的文档创建了一个门户包装器，如下所示：|22326|import+React+from+'react';
import+ReactDOM+from+'react-dom';
import+PropTypes+from+'prop-types';

const+tooltipRoot+=+document.getElementById('tooltip-root');

class+PortalWrapper+extends+React.Component+{
++constructor(props)+{
++++super(props);
++++this.el+=+document.createElement('div');
++}

++componentDidMount()+{
++++tooltipRoot.appendChild(this.el);
++}

++componentWillUnmount()+{
++++tooltipRoot.removeChild(this.el);
++}

++render()+{
++++//+eslint-disable-next-line+react/destructuring-assignment
++++return+ReactDOM.createPortal(this.props.children,+this.el);
++}
}

PortalWrapper.propTypes+=+{
++children:+PropTypes.oneOfType([
++++PropTypes.arrayOf(PropTypes.node),
++++PropTypes.node,
++]).isRequired,
};

export+default+PortalWrapper;|code-block|syntax|javascript|22327|在顶部，您可以看到一行const+tooltipRoot+=+document.getElementById('tooltip-root');，我只是在我的index.html中添加了一个div，它位于react应用的根div旁边，它将服务器作为我的门户的锚。|22328|然后，回到从react引导复制的CustomOverlayTrigger组件中，我以如下方式编辑了它：|22329|删除对this._overlay和this._mountNode的所有引用，因为PortalWrapper现在管理挂载/卸载。所以我删除了componentDidMount()，componentDidUpdate()，componentWillUnmount()和renderOverlay()|ordered-list-item|22330|我修改了makeOverlay，使其结果被PortalWrapper封装，因此它变成了以下内容：|22331|makeOverlay(overlay,+props)+{
++++return+(
++++++<PortalWrapper>
++++++++<Overlay
++++++++++{...props}
++++++++++show={this.state.show}
++++++++++onHide={this.handleHide}
++++++++++target={this}
++++++++>
++++++++++{overlay}
++++++++</Overlay>
++++++</PortalWrapper>
++++);
++}|22332|最后，我将render方法的返回语句更改为：|22333|return+(<>
++++++{cloneElement(child,+triggerProps)}
++++++{this.makeOverlay(overlay,+props)}
++++</>);|22334|在此之后，我只需将所有对OverlayTrigger的调用替换为CustomOverlayTrigger，并且没有警告消息，结果是相同的。|22335|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/portals.html|1|https://github.com/react-bootstrap/react-bootstrap/blob/bs3-dev/src/OverlayTrigger.js|2|https://github.com/react-bootstrap/react-bootstrap/blob/bs3-dev/src/utils/createChainedFunction.js^0|L|N|27|K|3U|E|5R|18|39|4|0|0|9|E|1I|L|O|2|1|24|2|2|0|0|0|B|1O|26|A|0|G|K|0|3|D|H|F|14|D|1X|J|2H|K|32|M|3P|F|0|L|D|0|0|0|0|C|E|W|K|0^^$0|@$1|2|3|4|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|F|3|G|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]]|D|@$9|1Y|A|1Z|1|20]|$9|21|A|22|1|23]]|E|$]]|$1|H|3|I|5|6|7|24|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|25|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|26|8|@$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|2B|8|@$9|2C|A|2D|B|C]]|D|@]|E|$]]|$1|S|3|T|5|U|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]|$9|2L|A|2M|B|C]|$9|2N|A|2O|B|C]|$9|2P|A|2Q|B|C]|$9|2R|A|2S|B|C]]|D|@]|E|$]]|$1|V|3|W|5|U|7|2T|8|@$9|2U|A|2V|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|L|7|2W|8|@]|D|@]|E|$M|N]]|$1|Z|3|10|5|U|7|2X|8|@]|D|@]|E|$]]|$1|11|3|12|5|L|7|2Y|8|@]|D|@]|E|$M|N]]|$1|13|3|14|5|6|7|2Z|8|@$9|30|A|31|B|C]|$9|32|A|33|B|C]]|D|@]|E|$]]|$1|15|3|-4|5|6|7|34|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]|1D|$5|18|19|1A|E|$1B|1E]]|1F|$5|18|19|1A|E|$1B|1G]]]]

I ran into the same problem with <code>react-bootstrap@v0.33.1</code> specifically when using <code>OverlayTrigger</code> component after upgrading to React 18. The warning message suggests to migrate to using portals. So I implemented a <code>CustomOverlayTrigger</code> component that leverages portals and referred to React's <a href="https://reactjs.org/docs/portals.html" rel="nofollow noreferrer">portal documentation</a> to do so. Note that this solution is for Bootstrap 3 usage of <code>OverlayTrigger</code> (react-bootstrap v0.33.1). It seems later versions of react-bootstrap got rid of using <code>ReactDOM.unstable_renderSubtreeIntoContainer</code>. If you are not in a position to migrate to later versions (like I am), this solution will help for this use case. I have not check thoroughly if other components use the deprecated method, but the approach might be the same.
First of all, I copied the original source of the <code>OverlayTrigger</code> component code located <a href="https://github.com/react-bootstrap/react-bootstrap/blob/bs3-dev/src/OverlayTrigger.js" rel="nofollow noreferrer">here</a>. You will need to clean up the imports and include into your code the utils function <code>createChainedFunction</code> located <a href="https://github.com/react-bootstrap/react-bootstrap/blob/bs3-dev/src/utils/createChainedFunction.js" rel="nofollow noreferrer">here</a>.
I then created a portal wrapper based off React's documentation that looks like this:
<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

const tooltipRoot = document.getElementById('tooltip-root');

class PortalWrapper extends React.Component {
 constructor(props) {
 super(props);
 this.el = document.createElement('div');
 }

 componentDidMount() {
 tooltipRoot.appendChild(this.el);
 }

 componentWillUnmount() {
 tooltipRoot.removeChild(this.el);
 }

 render() {
 // eslint-disable-next-line react/destructuring-assignment
 return ReactDOM.createPortal(this.props.children, this.el);
 }
}

PortalWrapper.propTypes = {
 children: PropTypes.oneOfType([
 PropTypes.arrayOf(PropTypes.node),
 PropTypes.node,
 ]).isRequired,
};

export default PortalWrapper;
</code></pre>
At the top, you can see the line <code>const tooltipRoot = document.getElementById('tooltip-root');</code>, I simply added in my <code>index.html</code> a div next to the react app's root div that will server as the anchor for my portal.
Then, back in the <code>CustomOverlayTrigger</code> component copied from react-bootstrap, I edited it in the follwing manner:
<ol>
<li>Remove all references to <code>this._overlay</code> and <code>this._mountNode</code> because the <code>PortalWrapper</code> now manages the mounting/unmounting. So I deleted <code>componentDidMount()</code>, <code>componentDidUpdate()</code>, <code>componentWillUnmount()</code> and <code>renderOverlay()</code>
</li>
<li>I modified makeOverlay so that its result is wrapped by <code>PortalWrapper</code> so it became the following:
</li>
</ol>
<pre><code>makeOverlay(overlay, props) {
 return (
 &lt;PortalWrapper&gt;
 &lt;Overlay
 {...props}
 show={this.state.show}
 onHide={this.handleHide}
 target={this}
 &gt;
 {overlay}
 &lt;/Overlay&gt;
 &lt;/PortalWrapper&gt;
 );
 }
</code></pre>
<ol start="3">
<li>Finally, I changed the render method's return statement to become:</li>
</ol>
<pre><code>return (&lt;&gt;
 {cloneElement(child, triggerProps)}
 {this.makeOverlay(overlay, props)}
 &lt;/&gt;);
</code></pre>
After this, I simply had to replace all my invocations to <code>OverlayTrigger</code> with <code>CustomOverlayTrigger</code> and I had the same result without the warning message.

I am following a guide to upgrade to React 18. After completing the upgrade I am seeing errors on certain pages in my app.
<pre><code>ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18.
</code></pre>
I am not using the <code>unstable_renderSubtreeIntoContainer()</code> function anywhere in my app, but when I look closer at what is causing these errors it seems to be caused my Bootstrap components.
Is there anyway to update this to remove the errors?

Is there any way to fix errors caused by Bootstrap when upgrading to React 18

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在按照指南升级到反应18。在完成升级之后，我在我的应用程序中看到了某些页面上的错误。ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported in React 18.我没有在我的应用程序中任何地方使用unstable_renderSu...

在升级到React 18时，是否有方法修复由Bootstrap引起的错误？-腾讯云开发者社区-腾讯云

问在升级到React 18时，是否有方法修复由Bootstrap引起的错误？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在升级到React 18时，是否有方法修复由Bootstrap引起的错误？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在升级到React 18时，是否有方法修复由Bootstrap引起的错误？
EN