如何使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> 

雖然，在它的工作原理目前的形式，它具有列表的默認設置，這意味着我可以擴展多個ListItems看到自己nestedItems。但是，我想要有類似手風琴的行爲。用戶每次只能擴展一個ListItem以查看其nestedItems。所以，如果一個已經擴展，並且用戶點擊擴展另一個，那麼已經擴展的第一個應該被關閉，並且應該擴展新按下的那個。任何想法如何使用Material UI中的List元素來實現此目的？

Answer 1

而不是使用列表，使用SelectableList並以相同的方式定義ListItems。要控制SelectableList的打開/關閉行爲，請將屬性open與每個主列表項目一起使用。

查看本文的最後一個例子DOC page。

代碼：

定義在狀態變量的值：

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

與SelectableList的定義值屬性：

<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-僅在主ListItems上定義onClick，而不在子項上定義。

2-內部_onClick傳遞與您使用主ListItem定義的值相同的值。

3-僅在主列表項上定義打開屬性，而不在子項上定義打開屬性。

4-如果狀態值與該列表項的值相同，則將條件置於打開屬性中，然後打開該列表並關閉所有其他列表。

Answer 2

一種方法是跟蹤selectedItem，然後只渲染其嵌套項目。例如：

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