标签: simplebar

我正在尝试将 Simplebar 滚动条添加到 MUI Material Autocomplete 组件，而不是默认的浏览器滚动条。所有这些都有效，但这样做我失去了使用键盘导航选项列表的能力。

MUI 文档中有这个片段

\n

ListboxComponent\n如果提供自定义 ListboxComponent 属性，则需要确保目标滚动容器的 role 属性设置为 listbox。这可以确保滚动的正确行为，例如在使用键盘导航时。

\n

但我不知道该怎么做。

以下代码来自 MUI 文档，第一个带有自定义 ListboxComponenet 和缩短的电影列表的自动完成示例。（https://mui.com/components/autocomplete/）

import * as React from \'react\';\nimport TextField from \'@mui/material/TextField\';\nimport Autocomplete from \'@mui/material/Autocomplete\';\n\nimport SimpleBar from "simplebar-react";\nimport "simplebar/dist/simplebar.min.css";\n\nexport default function ComboBox() {\n  return (\n    <Autocomplete\n      disablePortal\n      id="combo-box-demo"\n      options={top100Films}\n      ListboxComponent={SimpleBar}\n      sx={{ width: 300 }}\n      renderInput={(params) => <TextField {...params} label="Movie" />}\n    />\n  );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = …

我正在尝试映射从 api 调用获得的响应。我想在这张地图上渲染一个div。这就是我的代码的样子：

<div data-simplebar className="img-scroll">
    {this.state.imageSearchResults.items.map((item, ind) => {
        return <div className="image-square" style={{backgroundImage:`url(${this.state.imageSearchResults.items[0].link})`}}></div>
    })}
</div>

我收到一条错误消息

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

这有什么问题吗？我过去也以同样的方式进行过映射，但从未遇到过这样的错误。