React点击同一元素切换div显示隐藏的toggle功能现有代码如何改造？

只需修改toggleComment函数的逻辑，增加当前激活状态判断即可，原有样式判断逻辑无需改动：

const [posts, setPosts] = useState([]);
const [commentState, commentChange] = useState({
  activeObject: null
});

const toggleComment = (index) => {
  const targetPost = posts[index];
  // 若点击的是当前已激活的项，则关闭，否则切换为当前项
  const newActiveObject = commentState.activeObject === targetPost ? null : targetPost;
  commentChange({...commentState, activeObject: newActiveObject})
}

const toggleActiveStyles = (index) => {
  if(posts[index] === commentState.activeObject) {
    return "dashboard__commentContent toggle";
  } else {
    return "dashboard__commentContent";
  }
}


return error ? (
  <span>{error}</span>
) : (
  // 注意：jsx中列表渲染需要外层包裹父元素，同时给子项加唯一key属性
  <>
    {posts.map((post, i) => (
      <React.Fragment key={i}>
        <button onClick={() => toggleComment(i)} >toggle</button>
        <div className={toggleActiveStyles(i)}>
          <h1>{post.title}</h1>
        </div>
      </React.Fragment>
    ))}
  </>
)

补充说明：

• 如果你的post数据存在唯一id属性，建议用id替代对象引用做相等判断，避免因为数组重排、对象引用更新导致的逻辑异常，判断逻辑调整为commentState.activeObject?.id === targetPost.id即可
• 原代码缺少列表渲染的父元素包裹和key属性，补充后可消除React的语法警告

内容的提问来源于stack exchange，提问作者james williams