如何使用react-select解决react-window高度问题?[关闭]

How to fix react-window height issue with react-select? [closed]

提问人:Rohit Verma 提问时间:9/26/2023 最后编辑:halferRohit Verma 更新时间:10/8/2023 访问量:87

问:


编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

上个月关闭。

我正在将react-select与react-window一起使用,但是下拉列表的高度存在问题,例如:

我只有两个值,但高度大于项目,我该如何解决?来自 API 的下拉列表值可能会有所不同。

注意:我还需要定义下拉列表的maxHeight。

代码沙盒

javascript reactjs react-select react-window

评论

0赞 halfer 10/8/2023
请注意,我们在这里更喜欢技术性的写作风格。我们温和地劝阻问候、希望你能提供帮助、感谢、提前感谢、感谢信、问候、亲切的问候、签名、请你能帮忙、健谈的材料和缩写的 txtspk、恳求、你被困了多长时间、投票建议、元评论等。只需解释您的问题,并展示您尝试过的内容、预期的内容以及实际发生的事情。

答:

1赞 Sarkar 9/26/2023 #1

使用 react 样式更改高度以解决此处的问题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>

您仍然需要指定,因为组件需要它,但它可以是任何值,将覆盖它。这是问题的修复分支heightmax-content

评论

0赞 Rohit Verma 9/26/2023
我还需要定义下拉列表的 maxHeight。
0赞 Sarkar 9/26/2023
@RohitVerma我已经更新了答案和分叉,现在它也包括 maxHeight。
0赞 Rohit Verma 9/26/2023
如果下拉项将超过其给出问题的 2-3 个,您能否检查 codSandbox 再次,我在问题中给出的 codeSanbox 链接中实现了您的更改。
1赞 Rohit Verma 9/26/2023
感谢@Sarkar它现在工作正常,我用解决方案更新了我的代码沙盒......
0赞 Rohit Verma 10/3/2023
我们可以让 itemSize 自动吗?因为当大数据时,项目内容是重叠的......在下拉选项中...