使用React Hooks的嵌套手风琴

Question

我有一个<CommentItem />组件，可以呈现嵌套组件

评论模型

interface Comment {
  text: string
  comments?: Comment[]
}

评论组件

function CommentItem({ item }) {
  const [isExpanded, setIsExpanded] = useState(true);
  return (
    <div className="comment">
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? "-" : "+"}
      </button>
      {isExpanded && (
        <Fragment>
          <p>{item.text}</p>
          {item.comments &&
            item.comments.map((comment, index) => (
              <CommentItem key={index} item={comment} />
            ))}
        </Fragment>
      )}
    </div>
  );
}

问题

当我切换父状态时，展开状态不会保留在子注释中

演示

https://codesandbox.io/s/bold-feather-tsztx

预期结果

折叠 beta ，折叠 root ，展开 root < / strong>， 测试版 仍应折叠

注意

解决方法是使用样式隐藏CommentItem，但是我想在不可见的情况下从DOM中删除（！）CommentItem