如何切换布尔状态以显示/隐藏组件/div？

// HTML
<div id="myComponent">This is my component</div>

// JavaScript
var isComponentVisible = true; // 布尔变量，用于控制组件的显示/隐藏

if (isComponentVisible) {
  document.getElementById("myComponent").style.display = "block"; // 显示组件
} else {
  document.getElementById("myComponent").style.display = "none"; // 隐藏组件
}

<style>
  .hidden {
    display: none;
  }
</style>

<div id="myComponent" class="hidden">This is my component</div>

<script>
  var isComponentVisible = true; // 布尔变量，用于控制组件的显示/隐藏
  var component = document.getElementById("myComponent");

  if (isComponentVisible) {
    component.classList.remove("hidden"); // 移除隐藏类，显示组件
  } else {
    component.classList.add("hidden"); // 添加隐藏类，隐藏组件
  }
</script>