降档 + react-window + material-ui

Question

我尝试调整 this downshift example (other-examples/react-window) 以使用 material-ui 组件。

我已经在我的本地环境中尝试了几个选项，但是当使用键盘滚动或浏览结果时它会破坏渲染。我已经分叉了 codesandbox here。我改编的唯一代码是 ItemRenderer 函数，将原来的 Item 更改为 ListItem 或 MenuItem 但结果是一样的。我还将 FixedSizeList 的 itemSize 修改为 46 以匹配 material-ui 组件高度，但它没有解决任何问题。

我不明白ui为什么 material-ui list example works with react-window but it breaks with downshift。

任何帮助将不胜感激:)

使用的版本：

@material-ui/core: 3.9.3
downshift: 3.1.8
react-window: 1.8.1

Answer 1

好的，找到了，我错过了 material-ui 示例中传递给 ListItem 组件的 style={this.props.style}，显然这破坏了一切...

我用 material-ui 组件改编了整个示例，以防它对某人有用。

降档 + react-window + material-ui

Downshift + react-window + material-ui

reactjs

material-ui

downshift