在React 18中用JSX替换DOM

Question

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

​

​

我使用ReactDOM.render将我的代码中的某些“不可访问”的部分替换为JSX组件，它在以前的版本中运行得很好，但是现在我收到了这条恼人的错误消息，我想摆脱它。

说来话长：

我正在为react18和Nextjs使用react18库。

我面临着库的限制，在以前的版本中，我能够通过JSX在头按钮中呈现，但在当前版本的5.11.2中，它已经不可能了，它是只允许您设置文本或引导/字体-可怕的图标。。

因此，我使用了一个已知的老技巧，用HTML元素代替DOM

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

这就是导致上述错误消息的原因。

我试过的

正如错误提示的那样，我尝试过使用createRoot，但是它也给了我一个错误(而且afaik只用于根组件，所以我不喜欢使用它)。

Answer 1

最后，我用另一种方法实现了我想要的。

与直接用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" />);

Answer 2

这应该能帮到你

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