reactjs - 如何让Material UI List只打开一个List Item？

Question

我想在 React 中使用 Material-UI 中的列表，其中列表也有嵌套项。我有这样的代码:

<List>
    {this.state.categories.map(category => {
        return (
            <ListItem key={category.categoryID} 
                      primaryText={category.name}
                      nestedItems={[
                          category.subcategories.map(subcat => {
                              return (
                                  <ListItem key={subcat.subcatID}
                                            primaryText={subcat.name} />
                              )
                          })
                      ]} />
        )
    })}
</List>

虽然在当前形式下它可以工作，但它具有 List 的默认设置，这意味着我可以展开多个 ListItems 以查看它们的 nestedItems。但是，我想要类似 Accordion 的行为。用户一次只能展开一个 ListItem 以查看其 nestedItems。因此，如果一个已经展开并且用户单击展开另一个，则应关闭第一个已展开的，而应展开新按下的一个。知道如何使用 Material UI 中的 List 元素来实现此目的吗？

Answer 1

不使用List，而是使用SelectableList并以相同的方式定义ListItems。要控制 SelectableList 的打开/关闭行为，请对每个主列表项使用属性 open。

检查此 DOC 的最后一个示例页面。

代码:

在状态变量中定义一个值:

value: '';  //no list will be in open state initially

使用 SelectableList 定义 value 属性:

<SelectableList value={this.state.value}>
    <ListItem

        value = {1}
        open = {this.state.value == 1? true: false}
        onClick = {() => this._click(1)}

        primaryText="Brendan Lim"
        primaryTogglesNestedList={true}

        nestedItems={[
            <ListItem
                value='a'
                primaryText="Grace Ng"
            />,
        ]}
    />
    <ListItem

        value = {2}
        open = {this.state.value == 2? true: false}
        onClick = {() => this._click(2)}

        primaryText="Brendan Lim"
        primaryTogglesNestedList={true}
        nestedItems={[
            <ListItem
                value='b'
                primaryText="Grace Ng"
            />,
        ]}
    />
</SelectableList>


_click(value){
   this.setState({value});
}

小鬼点数:

1- 仅在主 ListItem 上定义 onClick，而不是在子项目上。

2- 在 _onClick 内部传递与主 ListItem 定义的相同值。

3- 仅在主列表项而不是子项上定义开放属性。

4-如果状态值与该列表项的值相同，则将条件放入 open 属性中，然后打开该列表并关闭所有其他列表。