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

Question

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

目前它显示大约 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列出组件样式以查看特定组件可用的样式以及使用的默认值非常有用。