reactjs - Downshift + react-window + material-ui

Question

EDIT: I strongly recommend using the new Autocomplete that has a multitude of options and works very well instead of integratingDownshift manually.

我已经尝试适应 this downshift example (other-examples/react-window) 使用 material-ui 组件。

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

我不太明白为什么 material-ui list example与 react-window 一起工作但它打破了 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 组件调整了整个示例，以防它对某人有用。