如何在 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';
}

点击后，代码崩溃了。

点击一次，该元素应该是hidden/removed，直到下次应用程序重新启动。

此处Code Sandbox Link进一步解释。

我对任何解决方案持开放态度，但也请解释，因为我对学习 React 还很陌生。

Answer 1

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

你应该避免使用 findDOMNode（在大多数情况下 refs 可以解决你的问题）因为 findDOMNode 有一些缺点，比如 react's documentation states “findDOMNode 不能与功能组件一起使用”。我已经使用 refs（在这种情况下为前向 ref）使其工作。
GorillaSurfIn 被调用了两次，因此屏幕上出现了两个具有相同 ID 的大猩猩 gif。不确定这是否是预期的行为，但每个元素都应该有唯一的 ID。
查看 code sandbox。

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

How to hide or remove an element onClick in React?

components

onclick

hide

reactjs