javascript - 通过 Id 获取 HTML 元素并通过 React 切换其 CSS

Question

我有一些文件加载​​到我的 React 组件中，这些文件具有 HTML 代码。 就像现在一样，纯 HTML 代码呈现得很好，但是每当您单击应用程序其他部分或上面文本中的某些按钮时，就会出现一些“隐藏”代码(可以把它想象成当您单击时展开的面板在上面)。 HTML 仅使用旧的 <div id="someId" style="display:none"> 隐藏.

无论如何，我正在尝试让正确的面板在单击它们各自的按钮时展开。

所以理论上，我需要做的是通过id找到元素，并在需要时将其显示切换为阻塞，然后在再次单击父元素时将其切换回来。

不幸的是，我不知道该怎么做，而且到目前为止还一无所获。就像现在一样，我可以访问组件的 ID。我想知道的是，我究竟如何才能访问它并更改正在渲染的内容？

Answer 1

创建你的函数:

function element_do(my_element, what_to_do) {
 document.getElementById(my_element).style.display = what_to_do;
}

在后面的代码中，您可以通过 javascript onclick 附加到任何您想要的位置，这取决于您需要什么:

element_do("someId", "none"); // to hide
element_do("someId", "block"); // to show

或创建自己的切换:

function toggle_element(element_id) {
      var element = document.getElementById(element_id);
      element.style.display = (element.style.display != 'none' ? 'none' : 'block' );
}
// and you can just call it
<button onClick="toggle_element('some_id')">toggle some element</button>