如何根据 id 显示/隐藏嵌套下拉列表的内容？

如何解决如何根据 id 显示/隐藏嵌套下拉列表的内容？

对于 preact 树组件，我想实现仅当用户单击父元素的相应按钮时才显示子元素列表。到目前为止，我的代码可以在单击一个父列表的按钮时显示或隐藏下一层的所有子列表。 这是我的树元素列表：

let list = [
  {
    "name": "rootListItem1","id": "1"
  },{
    "name": "rootListItem2","id": "2","list": [
      {
        "name": "secondLayerItem1","id": "21","list": [
          {
            "name": "thirdLayerItem11","id": "211"
          },{
            "name": "thirdLayerItem12","id": "212","list": [
              {
                "name": "fourthLayerItem121","id": "2121","list": [
                  {
                    "name": "fifthLayerItem1211","id": "21211"
                  },{
                    "name": "fifthLayerItem1212","id": "21212"
                  },]
              },{
                "name": "fourthLayerItem122","id": "2122"
              },]
          },]
      },{
        "name": "secondLayerItem2","id": "22","list": [
          {
            "name": "thirdLayerItem21","id": "221"
          },{
            "name": "thirdLayerItem22","id": "222"
          }
        ]
      }
    ]
  },{
    "name": "rootListItem3","id": "3"
  },{
    "name": "rootListItem4","id": "4"
  }
];

这是我的 Tree 组件：

const Tree = function (props) {
  const [visible,setVisibility] = useState(false);
  return (
    <ul>
      {
        props.list.map(listItem =>
          <>
            <div class="row">
              <span class={"caret" + (visible ? " caret-down" : "")}></span>
              <input type="checkBox" name={listItem.name} id={listItem.id} value={listItem.id}/>
              <button id={listItem.id} class="dropdown-list" onclick={() => {setVisibility(!visible)}}>{listItem.name}</button>
            </div>
            <li id="dropdown-content" class={"dropdown-content" + (visible ? " visible" : "")}>
              { listItem.list && <Tree list={listItem.list}/> }
            </li>
          </>)
      }
    </ul>
  );
}

我尝试检查列表项的 id 是否等于按钮的目标 id，如下所示：

<button id={listItem.id} class="dropdown-list" onclick={(e) => {e.target.id === listItem.id ? setVisibility(!visible) : null}}>{listItem.name}</button>

但是，例如，当我单击任何 secondLayerItems 的按钮时，无论它是否属于 secondLayerItem，每个第三层项都会变得可见。这是我使用 preact 的第一个项目，我对编程还是很陌生。有人知道我在这里缺少什么以及如何在单击 secondlayerItem2 时仅显示第三层项目 21 和第三层项目 22 时实现这一点吗？我认为这里缺少一些基本的东西，但我不知道错误是什么。