Estoy generando una lista plana que contiene comentarios. Dentro del componente de comentarios, estoy usando un estado colapsado para determinar si el comentario individual está colapsado o no. Presionar en cada comentario individual lo hace colapsar. Sin embargo, quiero manipular este estado desde el componente principal sin afectar a todos los demás comentarios. ¿Cómo podría lograr esto?
Intenté usar el enlace de referencia para acceder a cada elemento individual en la lista plana, pero sigue devolviendo 'indefinido'. Estoy usando la biblioteca react-native-colapsable para colapsar los comentarios.
Mi lista plana:
<FlatList data={SAMPLE_COMMENTS} keyExtractor={keyExtractor} renderItem={({item})=> <Comment ref={(el) => {rowRefs.current[item.id] = el} } onPress={()=>{rowRefs.current[item.id].collapseFunction()}} body={item.body} author={item.author} level={item.level} createdAt={item.createdAt} commentId={item.id} commentChildren={item.replies} />} />Componente de comentario:
const [isCollapsed, setIsCollapsed] = useState(false); const collapseFunction = () => {setIsCollapsed(!isCollapsed)}; return ( <Collapsible collapsed={isCollapsed}> <TouchableWithoutFeedback onPress={onPress}> <View style={styles.container}> </View> </TouchableWithoutFeedback> </Collapsible>puedes usar la funcion recursiva
// add this to parent <MapComments comments={SAMPLE_COMMENTS} childClickHandler={onItemClickHandler} /> // MapComments component const MapComments= ({ Comments= [], childClickHandler, }) => { return ( <ScrollView> <Tree CommentTree={CommentTree} childClickHandler={childClickHandler} /> </ScrollView> ); }; const Tree = ({CommentTree= [], childClickHandler}) => { return ( <View> {CommentTree.map(tree => ( <TreeNode key={tree.commentId} node={tree} childClickHandler={childClickHandler} /> ))} </View> ); }; const TreeNode = ({node, childClickHandler}) => { const [childVisible, setChildVisiblity] = useState(false); const hasChild = node.commentChildren.length > 0 ? true : false; return ( <View style={{marginRight: node.Level > 1 ? 40 : null}}> <TouchableOpacity onPress={() => hasChild ? setChildVisiblity(prev => !prev) : childClickHandler(node) }> <Text numberOfLines={1} style={styles.label}> {node.body} </Text> {hasChild ? ( <AntDesign name={childVisible ? 'minus' : 'plus'} /> ) : ( <FontAwesome name="circle" /> )} </TouchableOpacity> {hasChild && childVisible && ( <Tree childClickHandler={childClickHandler} knowledgeTree={node.commentChildren} /> )} </View> ); };