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

Question

我有一个列表，使用 material-ui 构建。里面有很多项目，所以滚动条是可见的。

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

单击项目列表后应如下所示（所选项目位于中心）：

Answer 1

我知道这里有一个可接受的答案，但我认为使用<ListItem&nbsp;autoFocus={true}/>会将该列表项滚动到视图中。将列表项设置为选中的相同逻辑也可用于设置autoFocus属性。

Answer 2

保持对List的引用，然后单击ListItem，根据以下内容计算需要滚动的量：列表项高度所选项目的索引可见列表项的数量。const scrollableListRef = React.createRef();function Row(props) {&nbsp; const { index, style } = props;&nbsp; const placeSelectedItemInTheMiddle = (index) => {&nbsp; &nbsp;const LIST_ITEM_HEIGHT = 46;&nbsp; &nbsp;const NUM_OF_VISIBLE_LIST_ITEMS = 9;&nbsp; &nbsp;const amountToScroll = LIST_ITEM_HEIGHT * (index - (NUM_OF_VISIBLE_LIST_ITEMS / 2) + 1) ;&nbsp; &nbsp;scrollableListRef.current.scrollTo(amountToScroll, 0);&nbsp; }&nbsp; return (&nbsp; &nbsp; <ListItem button style={style} key={index}&nbsp;&nbsp; &nbsp; onClick={() => {placeSelectedItemInTheMiddle(index)}}>&nbsp; &nbsp; &nbsp; <ListItemText primary={`Item ${index + 1}`} />&nbsp; &nbsp; </ListItem>&nbsp; );}