如何在 React Native 中创建动态嵌套手风琴答案

【问题标题】：How to create dynamic nested accordion in React Native如何在 React Native 中创建动态嵌套手风琴
【发布时间】：2019-09-23 12:03:25
【问题描述】：

我在网上找到的所有examples 都只展示了如何创建单级手风琴，如下所示：

-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"
        }
    ]

【问题讨论】：

标签： javascript react-native dynamic accordion jsonresponse

【解决方案1】：

根据您链接的组件，将每个组件作为自己的数组（父、子父、子标签）并呈现其自己的可折叠组件可能是个好主意。

对于父级，在 _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>
);

};

对于 subparent，对其子标签执行相同的操作。最好不要将它们放在同一个数组中，这样就不会将它们混淆在一起。

【讨论】：