Reactjs 如何在单击React时隐藏或删除元素？

我试图在点击一个元素“GorillarSurfin”后隐藏它。 但它也应该将“SetShouldGorillarSurfOut”转换为“true”。第二部分工作正常，但在我添加此函数之后：

function hideGorillaSurfIn() {
    let element = document.getElementById('gorilla-surf-in');
    ReactDOM.findDOMNode(element).style.display = 
  this.state.isClicked ? 'grid' : 'none';
}

单击后，代码将崩溃

单击后，该元素应隐藏/删除，直到下一次应用程序重新启动

下面是进一步解释的例子

---

我对任何解决方案都持开放态度，但也欢迎解释，因为我对React的学习还很新鲜。

我对您的代码做了一些修改，使其能够正常工作。您可以根据需要进行进一步的更改。我想补充几点：-

您应该避免使用findDOMNode（在大多数情况下，REF可以解决您的问题），因为findDOMNode存在某些缺陷，例如“findDOMNode不能与功能组件一起使用”。 我使用了refs（在本例中为forwardref）使其工作

GorillarSurfin被调用了两次，因此屏幕上有两个具有相同ID的大猩猩GIF。不确定这是否是预期的行为，但每个元素都应该有唯一的ID

看看这本书

---

只需注意几点：操纵可见性的方式完全不适合react—您需要依赖于状态（本地或全局）并使用事件处理程序相应地修改状态，而不是设置DOM元素样式；只要你在整个应用程序中使用功能组件，就不会出现这种情况。状态，出于同样的原因，你最好使用

连接

。至于你的具体问题，你应该将你尝试的代码嵌入沙箱中必要的组件中，否则就不太清楚到底应该点击什么以及预期会发生什么（此外，还不清楚到底需要发送哪些操作）。嗨，叶夫根，我非常感谢你的输入，但是我对这一切都很陌生，我发现你的解释太过先进，我无法理解。我知道你不知道我是新来的，我可能知道你使用的术语，但大部分我不理解。我真的很感激任何回应并利用他们的时间帮助他人的人，谢谢你让它发挥作用。你还记得（或知道如何）我可以找出你在项目中还做了哪些更改吗？除了AddTodo？因为我在AddTodo和GorillasSurfOut中更改了代码，而Gorilla仍然不会像在您的代码沙盒中一样进行解密…这些是我的代码沙盒中的行号：-AddTodo.js 1。第17行（创建参考）2。第31行（hideGorillaSurfIn功能）3。第43行（对GorillarSurfin的额外呼叫进行了评论）4。第45行（通过回调和clickHandler）此外，我还在GorillaSurf.js中做了一些更改，并在myStyles中添加了CSS。cssI没有注意到CSS部分。现在一切都变得更有意义了。完美的非常感谢！