React中如何通过Checkbox点击控制嵌套评论子回复的显示隐藏

核心修改点 #

• 给每个评论组件添加独立的本地状态，控制子评论的展开/收起状态
• 子评论节点不直接条件销毁，而是通过CSS过渡实现动画效果，避免DOM删除导致动画无法触发

完整组件代码 #

import { useState, FunctionComponent } from 'react';
// 替换为你实际的样式文件引入路径
import styles from './你的样式文件路径.module.css';

interface IUser {
  // 保持你原有IUser的字段定义即可
}

interface ICommentProps {
  createdAt: string;
  text: string;
  author: IUser;
  replies: IComment[];
  commentRating: number;
}

// 注意和你的数据源返回的评论字段对齐
interface IComment {
  comments: IComment[];
  author: IUser;
  createdAt: string;
  text: string;
  rating: number;
}

const Reply: FunctionComponent<ICommentProps> = ({ author, createdAt, text, replies, commentRating }) => {
  // 新增状态：控制子评论是否展开，默认设为展开状态
  const [isRepliesOpen, setIsRepliesOpen] = useState(true);

  return (
    <div className={styles.comment}>
      <AdvancedComment createdAt={createdAt} text={text} author={author} commentRating={commentRating} />
      <div className="comments">
        {/* 把checkbox和状态双向绑定 */}
        <input 
          type="checkbox" 
          checked={isRepliesOpen}
          onChange={(e) => setIsRepliesOpen(e.target.checked)}
        />
        {/* 新增子评论动画容器 */}
        <div className={`${styles.repliesContainer} ${isRepliesOpen ? styles.open : ''}`}>
          {replies.map((comment, index) => (
            <Reply
              {/* 建议替换为评论的唯一id，避免列表渲染异常 */}
              key={index}
              replies={comment.comments}
              author={comment.author}
              createdAt={comment.createdAt}
              text={comment.text}
              commentRating={comment.rating}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Reply;

对应CSS样式代码（放到你的.module.css文件中） #

.repliesContainer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 16px; /* 子评论缩进值可自行调整 */
  transition: all 0.3s ease; /* 动画时长、缓动函数可按需修改 */
}

.open {
  /* 最大高度设置为足够覆盖业务中最长的子评论高度即可，不要设过大避免动画速度异常 */
  max-height: 2000px;
  opacity: 1;
  margin-top: 8px;
}

方案说明 #

1. 每个评论组件独立管理子评论的展开状态，不需要向上提升状态，嵌套层级再多也不会出现状态混乱
2. 用max-height代替height: auto实现过渡，解决高度不确定场景下的CSS动画适配问题
3. 如果你不需要动画效果，可直接去掉repliesContainer容器，用{isRepliesOpen && replies.map(...)}做条件渲染即可，性能更高

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