在 React 18 中用 JSX 替换 DOM [重复]

问题描述 投票:0回答:2

如何从我的控制台中删除此错误消息

enter image description here

我正在使用

ReactDOM.render
用 JSX 组件替换代码中某些“无法访问”的部分,它在以前的版本中运行良好,但现在我收到了这个烦人的错误消息,我想摆脱它。

长话短说:

我正在使用 React18 和 Nextjs 的

FullCalendar
库。

我面临来自库的限制,在以前的版本中,我能够通过 JSX 在标题按钮中渲染,但在当前版本中

5.11.2
这不再可能了,它只允许您设置文本或bootstrap/font-awesome 图标.

所以我使用了一种古老的已知技巧,只用 HTML 元素来替换 DOM

ReactDOM.render(
  <AnyIconIWantToUse />,
  window.document.querySelector("#element-to-replace-id")
)

这就是出现上述错误消息的原因

我尝试过的事情

正如错误所示,我尝试使用

createRoot
代替,但它也给了我一个错误(而且据我所知,它只能与根组件一起使用,所以我宁愿不使用它)。

reactjs fullcalendar
2个回答
1
投票

这应该对你有帮助

createPortal(
    <AnyIconIWantToUse />,
    document.getElementById("element-to-replace-id")
 )

0
投票

我最终通过另一种方法实现了我想要的目标。

我没有直接用 JSX 替换 DOM 内容,而是将所需的 JSX 渲染到 DOM 中并用 DOM 替换 DOM

// utils/replaceDOM.ts
import type React from 'react';
import { renderToString } from 'react-dom/server';

type ReplaceDOM = (
  elementToReplace: Element,
  replacement: React.ReactElement
) => void;

const replaceDOM: ReplaceDOM = (elementToReplace, replacement) => {
  if (!replacement) return;
  // Get html from component (only get first render)
  const replacementHTML = renderToString(replacement);
  // Parse html string into html
  const parser = new DOMParser();
  const parsedDocument = parser.parseFromString(replacementHTML, 'text/html');
  const replacementElement = parsedDocument.body.children[0];
  // Append replacement to DOM
  window.document.body.prepend(replacementElement);
  // Replace children with element
  elementToReplace.replaceWith(replacementElement);
};

export default replaceDOM;

然后我就可以根据需要使用它了

replaceDOM(elementToReplace, <ElementIWant className="w-6" />);
© www.soinside.com 2019 - 2024. All rights reserved.