如何使用react-select解决react-window高度问题？

Question

我将react-select与react-window一起使用，但下拉菜单的高度存在问题，例如：

我只有两个值，但高度大于项目，我该如何修复它？来自 API 的下拉值可能会有所不同。

注意：我还需要定义下拉菜单的 maxHeight。

代码沙箱

Answer 1

使用反应样式将高度更改为

max-content

解决了这里的问题

  <List
    style={{ height: "max-content", maxHeight: maxHeight }}
    height={1}
    itemCount={children.length}
    itemSize={itemHeight}
    initialScrollOffset={initialOffset}
  >
    {({ index, style }) => <div style={style}>{children[index]}</div>}
  </List>

您仍然需要指定

height

，因为组件需要它，但它可以是任何值，

max-content

将覆盖它。 这是您问题的固定分支