如何在 React 中隐藏或删除元素 onClick？

Question

我试图在单击元素“GorillaSurfIn”后隐藏它。 但它也应该将“setShouldGorillaSurfOut”触发为“true”。第二部分有效，但在我添加了这个功能之后：

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

点击后，代码崩溃了。

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

这里是Code Sandbox Link 进一步解释。

我对任何解决方案持开放态度，但也请解释一下，因为我对 React 仍然很陌生。

Answer 1

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

1. 您应该避免使用 findDOMNode（在大多数情况下 refs 可以解决您的问题），因为 findDOMNode 存在某些缺点，例如react's documentation states“findDOMNode 不能与功能组件一起使用”。 我使用了 refs（在这种情况下为 forward ref）来使其工作。

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

3. 查看code sandbox。