如何修改React Native中FlatList列表内特定条目对应的组件状态

问题根因 #

你拿不到子组件ref的核心原因是：函数组件默认不支持直接绑定ref，必须通过forwardRef + useImperativeHandle的组合向父组件暴露内部方法。

方案1：使用ref调用子组件方法（符合你现有实现思路） #

第一步 修改Comment组件 #

你需要用forwardRef包装Comment组件，同时用useImperativeHandle暴露折叠方法给父组件：

import React, { useState, forwardRef, useImperativeHandle } from 'react';
// 用forwardRef包装组件，第二个参数接收父组件传入的ref
const Comment = forwardRef(({ onPress, body, author /* 其他原有props */ }, ref) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const collapseFunction = () => {setIsCollapsed(!isCollapsed)};

  // 向父组件的ref暴露要调用的方法
  useImperativeHandle(ref, () => ({
    collapseFunction
  }));

  return (
    <Collapsible  collapsed={isCollapsed}>
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.container}>
            {/* 原有评论内容渲染逻辑 */}
            </View>
        </TouchableWithoutFeedback>
    </Collapsible>
  );
});
// 给组件设置displayName方便调试
Comment.displayName = 'Comment';
export default Comment;

第二步 父组件ref初始化校验 #

确保你父组件中的rowRefs是用useRef初始化的空对象：

import { useRef } from 'react';
// 组件内部初始化
const rowRefs = useRef({});

此时你原来的FlatList代码不需要修改，父组件如果要主动操控某条评论折叠，直接调用对应id的ref方法即可，比如要折叠id为123的评论：

// 父组件任意位置调用，加可选链避免未挂载时报错
rowRefs.current[123]?.collapseFunction();

方案2：状态提升（更符合React单向数据流规范，无需处理ref） #

如果你不想维护大量ref，可以把折叠状态放到父组件维护，实现更简单：

父组件实现 #

// 父组件维护已折叠的评论id集合
const [collapsedIds, setCollapsedIds] = useState(new Set());

// 切换折叠状态的方法
const toggleCommentCollapse = (commentId) => {
  setCollapsedIds(prev => {
    const newSet = new Set(prev);
    newSet.has(commentId) ? newSet.delete(commentId) : newSet.add(commentId);
    return newSet;
  })
}

// FlatList renderItem修改为
<Comment 
  onPress={()=> toggleCommentCollapse(item.id)}
  collapsed={collapsedIds.has(item.id)}
  body={item.body} 
  author={item.author} 
  level={item.level} 
  createdAt={item.createdAt} 
  commentId={item.id} 
  commentChildren={item.replies} 
/>

Comment组件修改 #

删除内部的isCollapsed状态，直接用父组件传入的collapsed prop和onPress即可：

const Comment = ({ onPress, collapsed, body, author /* 其他原有props */ }) => {
  return (
    <Collapsible  collapsed={collapsed}>
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.container}>
            {/* 原有评论内容渲染逻辑 */}
            </View>
        </TouchableWithoutFeedback>
    </Collapsible>
  );
};

父组件要主动控制某条评论折叠时，直接操作collapsedIds这个Set即可，不需要引用任何子组件。

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