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

Question

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

目前它显示了大约 9 个项目，但我需要限制为 5 个。我不确定如何对下拉列表进行更改。

标签： react-select

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找出组件样式以查看特定组件可用的样式以及使用的默认值非常有用。