Estoy trabajando para hacer comentarios anidados que tengan respuestas colapsables. Para hacer esto, simplemente presento todos los comentarios en una lista plana en el orden en que los recibo y luego agrego un margen a la izquierda según el atributo de nivel que tiene cada elemento. Los datos de comentarios entrantes son los siguientes.
{ id: "1a", parent: "a", author: "joemorgan", body: "Such an amazing car, had seen this one in Paris earlier!", level: 0, replies: ["4w", "2f"] }, { id: "4w", parent: "1a", author: "jason", body: "Truly a beast", level: 1, replies: [] }, { id: "2f", parent: "1a", author: "katparis", body: "Rightly said", level: 1, replies: [] },Luego presento estos comentarios usando la siguiente lista plana
<FlatList data={SAMPLE_COMMENTS} keyExtractor={item=>item.id.toString()} renderItem={Comment body={item.body} level={item.level} commentId={item.id} commentChildren={item.replies} />} />Finalmente, he envuelto el componente de comentario real en un plegable (paquete reacciona-nativo-contraíble). De esta manera puedo colapsar el comentario específico tocándolo. El accesorio 'contraído' se establece mediante el estado isCollapsed.
const [isCollapsed, setIsCollapsed] = useState(false); <Collapsible collapsed={isCollapsed}> <TouchableWithoutFeedback onPress={()=> setIsCollapsed(true) }> <View style={styles.container}> </View> </TouchableWithoutFeedback> </Collapsible>Con el código anterior, puedo colapsar cada comentario individual tocándolo.
El problema es que no quiero colapsar el comentario sobre el que estoy presionando. Quiero colapsar sus hijos, para hacer eso, realmente quiero saber cómo puedo manipular el estado isCollapsed para los hijos de un comentario principal sin afectar dicho comentario principal. Dado que cada comentario tiene una identificación única, creo que podría usarse tal vez. Los elementos secundarios de cada comentario también son un atributo, por lo que tal vez eso también podría ayudar.
Cualquier pista sería muy útil. Gracias
Aparentemente, tiene una propiedad commentChildren , pero no puedo ver lo que contiene. ¿No puedes usar esa propiedad para colapsar todos los comentarios secundarios?
De todos modos, si no:
La lógica para decidir qué componentes del elemento deben contraerse debe estar fuera de los componentes del elemento, y los componentes del elemento solo tendrían su propio estado y una devolución de llamada para informar a la lógica del controlador, como "Me hicieron clic, mi ID es xyz". El controlador sabría entonces qué hacer.
Me gusta:
const childsOfComment = findChildCommentsRecursively( allComments, clickedComment ); ... <Comment commentId={ item.id } isCollapsed={ childsOfComment.includes( item.id ) } />Tal vez incluso mejor sería mantener la lista completa, incluida la información sobre qué colapsar en el estado, y hacer que la función de representación solo represente ese estado.
{ id: "1a", collapsed: true, // <-- store collapsed info in state parent: "a", ... },Sin embargo, esto podría necesitar una refactorización y podría ser más complicado, dependiendo de si también necesita mantener la lista original.