Question

我正在处理其他人的代码，并尝试弄清楚如何在 React 中按字母顺序呈现列表。我没有写任何这些，并且对 React 知之甚少，所以请耐心等待。

ul看起来像这样：

<ul className="prod-group__filter__options" ref={(options) => this.options = options}>
    {
        filter.dropdown.map((option, index) => (
            this.renderOption(filter, option, index)
        ))
    }
</ul>

和renderOption函数，显然呈现列表项如下：

renderOption(filter, option, index) {
    return (
        <li className="prod-group__filter__option" key={index}>
            <label className="prod-group__filter__option__label">
                <input name={filter.name}
                       type="checkbox"
                       defaultValue={option.slug}
                       checked={option.checked}
                       onChange={this.optionChangeHandler} />
                {option.label}
            </label>
        </li>
    );
}

我尝试按字母顺序排列的值是option.slug，它来自json列表。任何人都可以帮助我更接近按字母顺序呈现此列表吗？

Answer 1

在调用option之前，您必须使用普通javascript按字母顺序对filter.dropdown.map...进行排序。我建议使用lodash函数_.sortBy(option, 'slug');，其中option是一个具有名为slug的属性的对象数组，然后您可以将已排序的结果传递给map函数。

Answer 2

看起来filter.dropdown是您的选项数组。此数组传递给.map()方法，然后按给定顺序运行renderOption方法。

因此，您应该在调用filter.dropdown之前对ul组件代码中的.map()数组进行排序。

Answer 3

如果有人感兴趣，解决方案是在调用.map()之前对列表项进行排序，因为macbem和finch都建议。我使用const创建了一个“items”构造函数，然后我可以将其传递到ul：

const items = [].concat(this.props.options)
  .sort((a, b) => {
    const One = a.slug.toUpperCase();
    const Two = b.slug.toUpperCase();

    return (One < Two) ? -1 : (One > Two) ? 1 : 0;
  })
  .map((option, index) => this.renderOption(name, option, index));

return (
  <div className={classes}>
    <a className="prod-group__filter__dropdown"
       ref={(trigger) => this.trigger = trigger}
       onClick={this.triggerClickHandler}>
      {label}
    </a>
    <ul className="prod-group__filter__options" ref={options => this.options = options}>
      { items }
    </ul>
  </div>
);

React / JSX - 如何按字母顺序呈现列表

3 个答案: