react-select - 限制下拉列表中可见项目的数量

Question

我需要限制 react 选择下拉面板中显示的可见选项的数量。

目前它显示大约 9 个项目，但我需要限制在 5 个以内。我不确定如何更改下拉列表。

Answer 1

我通过覆盖核心组件样式来解决这个问题。这只是查找哪个组件呈现我感兴趣的样式的情况。

在本例中，控制下拉列表中可见项的是 menuList 组件。要覆盖组件样式，这是我使用的:

const selectStyles = {
  menuList: styles => {
    console.log('menuList:', styles);
    return {
      ...styles,
      maxHeight: 136
    };
  }
};

return (
  <Select
    value={selectVal}
    onChange={updateVal}
    options={options}
    styles={selectStyles}
  />
);

我发现console.log 输出组件样式以查看特定组件可用的样式以及使用的默认值非常有用。