Блог

Я работаю над созданием вложенных комментариев с разборными ответами. Для этого я просто отображаю все комментарии в плоском списке в том порядке, в котором я их получаю, а затем добавляю поле слева на основе атрибута уровня, который есть у каждого элемента. Данные входящих комментариев выглядят следующим образом.

 {  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: [] },  

Затем я отображаю эти комментарии, используя следующий плоский список

 lt;FlatList  data={SAMPLE_COMMENTS}  keyExtractor={item=gt;item.id.toString()}  renderItem={Comment body={item.body} level={item.level} commentId={item.id} commentChildren={item.replies} /gt;} /gt;  

Наконец, я завернул фактический компонент комментария в складной (react-native-складной пакет). Таким образом, я могу свернуть конкретный комментарий, нажав на него. «Свернутая» опора устанавливается с использованием состояния isCollapsed.

 const [isCollapsed, setIsCollapsed] = useState(false);    lt;Collapsible collapsed={isCollapsed}gt;    lt;TouchableWithoutFeedback onPress={()=gt; setIsCollapsed(true) }gt;  lt;View style={styles.container}gt;     lt;/Viewgt;  lt;/TouchableWithoutFeedbackgt;   lt;/Collapsiblegt;  

С помощью приведенного выше кода я могу свернуть каждый отдельный комментарий, нажав на него.

Проблема в том, что я не хочу сворачивать комментарий, на котором настаиваю. Я хочу свернуть его дочерние элементы, для этого я действительно хочу знать, как я могу управлять состоянием isCollapsed для дочерних элементов родительского комментария, не влияя на указанный родительский комментарий. Поскольку у каждого комментария есть уникальный идентификатор, я полагаю, что это можно было бы сделать, возможно, используя его? Дочерние элементы каждого комментария также являются атрибутом, так что, возможно, это также может помочь.

Любые зацепки были бы очень полезны. Спасибо

У вас , по-видимому, есть собственность commentChildren , но я не вижу, что в ней содержится. Разве вы не можете использовать это свойство, чтобы свернуть все дочерние элементы комментариев ?

В любом случае, если нет:
Логика, определяющая, какие компоненты элемента должны быть свернуты, должна находиться за пределами компонентов элемента, и компоненты элемента просто будут иметь свое собственное состояние и обратный вызов, чтобы сообщить об этой логике контроллера, например: «Я был выбран, мой идентификатор xyz». Тогда контролер знал бы, что делать.

Нравится:

 const childsOfComment = findChildCommentsRecursively( allComments, clickedComment ); ... lt;Comment  commentId={ item.id }  isCollapsed={ childsOfComment.includes( item.id ) } /gt;  

Возможно, еще лучше было бы сохранить весь список, включая информацию о том, что нужно свернуть в состоянии, и иметь функцию визуализации, которая просто отображает это состояние.

 {  id: "1a",  collapsed: true, // lt;-- store collapsed info in state  parent: "a",  ... },  

Однако это может потребовать некоторого рефакторинга и может быть более сложным, в зависимости от того, нужно ли вам также поддерживать исходный список.