Downshift + react-window + material-ui

Question

編輯：我強烈建議使用新的自動完成功能，它有很多選項並且效果很好，而不是手動集成 Downshift。

我試圖調整這個降檔示例（ other-examples/react-window ）以使用 material-ui 組件。

我在本地環境中嘗試了幾個選項，但是在使用鍵盤滾動或導航結果時會破壞渲染。 我在這里分叉了代碼框。 我修改的唯一代碼是ItemRenderer函數，通過ListItem或MenuItem更改原始Item但結果是相同的。 我還將 FixedSizeList 的itemSize為46以匹配 material-ui 組件的高度，但它沒有解決任何問題。

我不太明白為什么material-ui 列表示例與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 組件調整了整個示例，以防它對某人有用。