Как создать динамический вложенный аккордеон в React Native - PullRequest
Новая
       42

Как создать динамический вложенный аккордеон в React Native

1 голос
/ 23 сентября 2019

Все примеры , которые я нашел в Интернете, показывают только, как создать одноуровневый аккордеон, например: 

-parent1
    -child1
-parent2 
    -child2

Мне нужно создать динамический аккордеон с несколькими вложенными родителямиПримерно так: 

-parent
   -subparent1
      -subparent2
        ...
          -subparentN
             - child

Мои данные поступают в следующем формате: 

// first object in response is always considered to be the PARENT, 
last one is always CHILD, and those in between are SUBPARENTS
// number of SUBPARENTS is not constant
"parents": [
        {
            "id": "583",   // TOP LEVEL PARENT
            "label": "PARENT",
            "description": "irrelevant description here, i only need to show label for parents"
        },
        {
            "id": "593",
            "label": "SUBPARENT1",
            "description": "..."
        },
        {
            "id": "594",
            "label": "SUBPARENT2",
            "description": "..."
        },
        {
            "id": "604",
            "label": "SUBPARENT3",
            "description": "..."
        },
        {
            "id": "605", // CHILD
            "label": "CHILD LABEL",
            "description": "FEW LINES OF DESCRIPTION I NEED TO DISPLAY"
        }
    ]

1 Ответ

1 голос
/ 23 сентября 2019

Исходя из компонента, который вы связали, было бы неплохо иметь каждый из них в качестве своего собственного массива (родительский, подпопулярный, дочерний ярлык) и отображать свой собственный свертываемый.

Для родителя, иметь аккордеон внутри функции _renderContent , и этот аккордеон должен быть заполнен своим подподчинителем.Для родительского объекта с дочерним элементом укажите, что их _renderContent также будет заполнено содержимым дочернего элемента.

Для родительского объекта renderContent (см. Его sections реквизиты) 

_renderContent = section => {
return (
  <View style={styles.content}>
     <Accordion
    sections={SUBPARENT_SECTIONS}
    activeSections={this.state.activeSections}
    renderSectionTitle={this._renderSectionTitle}
    renderHeader={this._renderHeader}
    renderContent={this._renderContent}
    onChange={this._updateSections}
  />
  </View>
);

};

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

...