当我有 1000 个项目时，我可以在 ReactSelect 中只显示前 N 行吗？

Question

我使用 ReactSelect (https://react-select.com/props) 来渲染选择框。在我的具体情况下，react select 列表中呈现的每个项目都是一个带有 CSS 和 HTML 元素的“复杂”组件：

const User = ({ user }) => {
  return (
    <div className="xxxx">
      <b>{user.name}</b>
      // ...
    </div>
  );
};

当我点击反应选择开始搜索时，它会显示我的所有记录（2000）。速度超级慢。有没有办法将显示的项目数量限制为 100 个？

旁注：数据是前端的，所以我不需要调用 API。

Answer 1

这个解决方案对我有用：

  filterOptions = (allOptions, inputLabel) => {
    return (
      (inputLabel === undefined || inputLabel === "" || inputLabel === null)
        ? this.options.filter(option => allOptions.some(({ label }) => label === option.label))
        : this.options.filter(({ label }) =>label.includes(inputLabel))
    ).slice(0, 100)
}

和选择组件：

<Select
  options={this.options}
  value={value}
  name="value"
  className="some-class-name"
  onChange={this.handleChange}
  searchable
  filterOptions={this.filterOptions}
/>