我正在构建一个公文包来展示我所创建的作品。它包括一些来自FreeCodeCamp的小项目，这些项目是根据测试规范构建的。我想包括测试，这样查看代码的人就可以看到测试。
当您将cdn脚本嵌入到托管在任何位置的react应用程序中的index.html文件中时，它们都可以正常工作(即使react不希望外部力量操纵DOM(。这将安装一个可以分解的汉堡菜单，您可以选择要运行的测试请注意，这个汉堡包总是陈列着的
然而，我不想总是有这个汉堡菜单，因为我想展示的是页面的风格。我正在尝试等待并插入脚本标记，直到按下按钮为止。
如果我按顺序点击添加然后删除按钮，我可以成功地显示和删除汉堡菜单，但我知道在React设计方面我做得不对。这一点很明显，如果您连续两次点击addtodom按钮，它就不会被删除。此外，我可以第一次运行测试套件。但是，如果删除汉堡并将其添加回来，并尝试运行测试，控制台中就会出现错误。
我的问题是：如何正确地添加/删除cdn脚本元素(它将自动添加dom元素(汉堡包(；React"；设计我认为解决方案在于useEffect、useRef或useState，但我要"；绿色"；在React中，当我进行研究时，我仍然无法设计出有效的解决方案。
我把代码放在沙盒里。要重新创建问题，只需单击"显示汉堡"按钮，然后隐藏汉堡按钮，然后再次显示并尝试运行测试。或者连续多次单击"显示"。
任何关于如何解决此问题的提示都将不胜感激。这个问题超出了我的小经验。
链接到代码沙盒
所以我自己想好了。在React中，通过外部CDN安全地使加载到DOM中的元素出现和消失就像CSS一样简单。
我刚刚用CDN脚本标记将该项添加到DOM中。然后我可以更改display:none或visibility: hidden。
诀窍是先加载CDN脚本，然后隐藏它
我遇到了一个问题，因为我尝试了一种错误的方法，即添加CDN脚本标记，然后删除，再添加。