一键反应所有评论选项

Question

我有这段代码，我循环 post 数组来为

  const [commentOptions, setCommentOptions] = useState(false);

   return(
...

        {post.comments.map((comment) => (
          <div className="comments" key={comment._id}>
            <div className="commentUserImageAndUsername">
              <img
                className="commentUserImg"
                src={
                  comment.userId === users._id
                    ? users.profileImg || `${PF}/profile.jpg`
                    : null
                }
                alt="comment user "
              />
              {comment.userId === users._id ? users.firstname : null}
            </div>
            <div className="commentBody">{comment.body}</div>
            {user._id === comment.userId ? (
              <div
                className="commentOptionsMark"
                onClick={() => setCommentOptions(!commentOptions)}
              > - </div>
            ) : null}
            {commentOptions ? (
              <div className="commentOptions">
                <div className="deleteComment">Delete</div>
                <div className="editComment">Edit</div>
              </div>
            ) : null}
          </div>
        ))}
...
)

每个 comment 提取 comments 我有 hyphen 标记-，如果我点击它，它会将commentOptions状态设置为true，因此会出现commentOptions div，其中包含2个选项删除评论并编辑comment，这样做的问题是，如果我点击一条评论的连字符标记，则每条评论都会出现 commentOptions div，就像有 5 条评论一样评论，每个评论都有自己的选项，我只需点击一下即可控制每个评论的 commentOptions div 的外观，这不是我想要的，我想为每个评论显示一个 div 连字符 - 点击时，不是全部就像每条评论本身一样，如何解决这个问题？

Answer 1

存储用于控制的点击注释ID：

const [shownCommentId, setShownCommentId] = useState('');


{user._id === comment.userId ? (
      <div
         className="commentOptionsMark"
         onClick={() => setShownCommentId(comment._id)}
      > - </div>
) : null}

然后在地图中控制ID：

{shownCommentId === comment._id ? (
      <div className="commentOptions">
          <div className="deleteComment">Delete</div>
          <div className="editComment">Edit</div>
      </div>
 ) : null}