【发布时间】：2022-02-04 22:03:15
【问题描述】：
我正在建立一个作品集来展示我创作的作品。它包括一些来自 FreeCodeCamp 的根据测试规范构建的小项目。我想包含测试，以便查看代码的人可以看到测试。
当您将 cdn 脚本嵌入到任何地方托管的 react 应用程序中的 index.html 文件中时，它们可以正常工作（即使 React 不希望外部力量操纵 DOM）。这将安装一个可以展开的汉堡菜单，您可以选择要运行的测试。 请注意，始终显示此汉堡包。
但是，我不想总是有这个汉堡菜单，因为我想要显示的一些内容是页面的样式。我正在尝试等待并插入脚本标签，直到按下按钮。
如果我按顺序点击添加然后删除按钮，我可以成功显示和删除汉堡菜单，但我知道在 React 设计中我做错了。这一点很明显，如果你连续两次点击 add to dom 按钮，它就不会被删除。另外，我可以第一次运行测试套件。但是如果删除汉堡包并重新添加并尝试运行测试，控制台会出现错误。
我的问题是：如何在适当的“React”设计中正确添加/删除 cdn 脚本元素（它将自动添加 dom 元素（汉堡包）？我在想那个解决方案在于 useEffect、useRef 或 useState，但我在 React 中是“绿色”的，当我研究时，我仍然无法设计出有效的解决方案。
我将代码放在沙盒中。要重现问题，只需单击显示汉堡包按钮，然后隐藏汉堡包按钮，然后再次显示并尝试运行测试。或者连续点击多次显示。
任何有关如何解决此问题的提示将不胜感激。这个问题方式超出了我的小经验。
【问题讨论】：
标签： javascript reactjs react-hooks cdn react-dom