从 React 中的 document.createElementNS 创建的 Material UI 图标未正确加载

Posted 2023-02-22

【中文标题】从 React 中的 document.createElementNS 创建的 Material UI 图标未正确加载

【英文标题】：Material UI Icon created from document.createElementNS in React is not loading correctly

【发布时间】：2021-02-10 09:56:02

【问题描述】：

我正在我的应用程序中创建一个标签部分，类似于新 Stack Overflow 问题表单中的标签部分。我正在使用 youtube tutorial 中所示的 Material UI 关闭图标（我知道我正确安装了 Material UI 图标，因为我创建的演示图标有效，只是我使用 document.createElementNS 动态创建的图标不起作用 - 并且视频教程仅适用于没有 React 实现的 vanilla javascript 教程。我目前正在转换为 React 过程）

我尝试在 Stack Overflow 上使用此答案强制更新/渲染 React 应用程序 - React - How to force a function component to render? - 但这仍然不能使 Material UI 图标加载到正确的 SVG 表单中。

我的代码如下所示：（我使用 createElementNS 而不是 createElement，因为我认为我需要使用正确的大写 html 标记才能使 Material UI 图标工作 - 即。->）

  const formTagContainer = useRef(null);

  function createTag(label) 
    const div = document.createElement("div");
    const closeBtn = document.createElementNS("", `CloseIcon`);
    div.appendChild(closeBtn);
    return div;
  

  useEffect(() => 
    formTagContainer.current.appendChild(createTag("Jumbotron"));
  , []);

  return (
    <>
      <div ref=formTagContainer className="tagContainer" />
    </>
  );

上面的代码只是生成'<div><CloseIcon></CloseIcon></div>'，而没有将<CloseIcon></CloseIcon>部分切换为关闭图标按钮的SVG形式。当我在 JSX 中正常使用 CloseIcon 按钮时，它工作正常。所以我同时渲染了一个工作版本和一个非工作版本。强制重新渲染应用程序似乎不会使图标变成 SVG 格式。如何在 React 中动态加载图标？

【参考方案1】：

在使用 react 时不应该手动操作 dom，而是将标签存储在一个 state 中，然后在 JSX 中的 div 中渲染它们

  const [tags, setTags] = useState([]);

  useEffect(() => 
    setTags([...tags, label: 'Jumbotron'])
  , []);

  return (
    <>
      <div className="tagContainer">
        tags.map(tag => <div>tag.label<CloseIcon /></div>)
      </div>
    </>
  );

如果你需要一个默认标签，只需将它的标签状态初始值，然后你可以删除不必要的useEffect

const [tags, setTags] = useState([label: 'Jumbotron']);

【讨论】：

非常感谢您的回答！！这完全解决了我的问题！现在我有一个可以运行的应用程序：D

我想知道如何绕过在 React 中创建 dom 元素，但想不出那个解决方案，非常感谢！