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

Question

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

我正在使用

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

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

Answer 1

这应该对你有帮助

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

Answer 2

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

我没有直接用 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" />);