滚动到material-ui中的选定列表项

Question

我有一个使用material-ui构建的列表。其中有很多项目，因此滚动条是可见的。

我想做的就是滚动到选定的项目。对如何实现这一点有任何想法吗？

Here is a demo sendbox link

单击项目列表后，外观应如下所示（所选项目位于中间）：

Answer 1

我知道这里有一个可接受的答案，但是我认为使用

<ListItem autoFocus={true}/>

可以将该列表项滚动到视图中。将列表项设置为标记为选中的相同逻辑也可以用于设置autoFocus属性。

Answer 2

保留对 List 的引用，然后单击 ListItem ，根据以下内容计算需要滚动的数量：

1. 列出商品高度
2. 所选项目的索引

3. 可见列表项的数量。

   const scrollableListRef = React.createRef();
   
   function Row(props) {
     const { index, style } = props;
   
     const placeSelectedItemInTheMiddle = (index) => {
      const LIST_ITEM_HEIGHT = 46;
      const NUM_OF_VISIBLE_LIST_ITEMS = 9;
   
      const amountToScroll = LIST_ITEM_HEIGHT * (index - (NUM_OF_VISIBLE_LIST_ITEMS / 2) + 1) ;
      scrollableListRef.current.scrollTo(amountToScroll, 0);
     }
   
     return (
       <ListItem button style={style} key={index} 
       onClick={() => {placeSelectedItemInTheMiddle(index)}}>
         <ListItemText primary={`Item ${index + 1}`} />
       </ListItem>
     );
   }