如何使用createRef实现React类组件FlatList折叠项独立切换

你的代码存在两个核心问题，导致无法实现折叠面板的独立切换，同时createRef在这里的使用完全没必要：

1. 全局状态共用：单个showAccordion布尔值被所有列表项共享，触发时会同步切换所有面板的显示状态。
2. 单个Ref失效：仅创建一个accordian ref，所有列表项绑定同一个ref，最终ref只会指向最后一个渲染的组件，无法控制单个面板。

另外代码还有几处语法错误：constructor拼写错误、JSX标签未闭合、setState写法错误、keyExtractor使用Math.random()会引发组件重复渲染和性能问题。

修正后的完整代码 #

import React from 'react';
import { View, FlatList, TouchableOpacity, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'; // 假设使用该Icon库

export default class ShoppingScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 用对象存储每个索引对应的展开状态，初始都为false
      expandedItems: {}
    };
    // 此处无需createRef，完全通过状态控制即可
  }

  handleListItem(item, index) {
    // 获取当前项的展开状态，默认未展开
    const isExpanded = this.state.expandedItems[index] || false;

    return (
      <View key={index}>
        <TouchableOpacity 
          onPress={() => {
            this.setState(prevState => ({
              expandedItems: {
                ...prevState.expandedItems,
                // 切换当前索引对应的展开状态
                [index]: !isExpanded
              }
            }));
          }}
        >
          <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} />
          <Text>{item.title}</Text> {/* 可根据实际数据源调整字段 */}
        </TouchableOpacity>
        {/* 仅当前项展开时渲染内容 */}
        {isExpanded && <Text>{item.content}</Text>}
      </View>
    );
  }

  renderList() {
    return (
      <View>
        <FlatList
          data={fakeList} // 假设fakeList为你的数据源，如[{title: 'xxx', content: 'xxx'}, ...]
          keyExtractor={(item, index) => index.toString()} // 优先使用item的唯一id，无id时用索引
          renderItem={({ item, index }) => this.handleListItem(item, index)}
        />
      </View>
    );
  }

  render() {
    return this.renderList();
  }
}

关键改动说明 #

1. 状态结构调整：用expandedItems对象替代单个布尔值，每个列表项的索引对应一个布尔值，实现独立状态管理。
2. 点击逻辑修改：点击时仅更新当前索引对应的状态，不影响其他项的展开状态。
3. 移除无用Ref：完全通过状态控制面板显示，不需要createRef操作组件实例。
4. 修复语法与性能问题：修正构造函数拼写、JSX标签闭合、setState写法，优化keyExtractor避免组件重复渲染。

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