有没有办法将加载器组件添加到 Material ui Autocomplete 组件答案

【问题标题】：Is there a way to add a loader component to the Material ui Autocomplete component有没有办法将加载器组件添加到 Material ui Autocomplete 组件
【发布时间】：2021-11-04 09:41:09
【问题描述】：

我正在尝试对我的自动完成组件实现无限滚动，它看起来像这样

const SearchSelect: React.FC<SearchSelectProps> = (props) => {
    return (
        <Autocomplete
            {...props}
            ListboxProps={{
                onScroll: (event: React.SyntheticEvent) => {
                    const listboxNode = event.currentTarget
                    if (
                        listboxNode.scrollTop + listboxNode.clientHeight ===
                        listboxNode.scrollHeight
                    ) {
                        props.loadmoreresults && props.loadmoreresults()
                    }
                },
            }}
            renderInput={(params) => (
                <TextField
                    {...params}
                    label={props.label}
                    variant="filled"
                />
            )}
        />
    )
}

export default withStyles(styles)(SearchSelect)

每次滚动到列表底部时，我都想在列表末尾添加一个加载器组件。如果那是不可能的，至少在最后添加一个文本“加载”。你会怎么做？

提前致谢

【问题讨论】：

标签： reactjs material-ui material-design

【解决方案1】：

我终于找到了如何使用renderOption prop，如下：

           renderOption={(option: any) => {
                if (option === props.options[props.options.length - 1] && props.hasNextPage) {
                    return (
                        <div>
                            {option.label}
                            <Loader />
                        </div>
                    )
                }
                return option.label
            }}

编辑：这将为最后一项添加一个加载器，它不会与最后一个选项分开，因此如果您希望在列表下添加一个额外的组件，它可能不适合您。为此，您可以创建自定义 Paper 组件并通过 PaperComponent 属性添加它：

function CustomPaper({ children, ...others }) {
    return (
        <Paper variant="outlined" {...others}>
            {children}
            <Loader />
        </Paper>
    )
}

【讨论】：