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

我正在处理别人的代码并试图弄清楚如何按字母顺序呈现列表反应。我没有写任何关于React的知识，所以请耐心等待。React/JSX - 如何按字母顺序呈现列表

的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列表。任何人都可以帮助我更接近按字母顺序呈现此列表吗？

来源

2017-08-28 hmoore

[排序阵列对象的由字符串属性值在JavaScript（的可能的复制https://stackoverflow.com/questions/1129216/sort-array-of-string-property-value-in-javascript） –

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

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

来源

2017-08-28 16:18:16 macbem

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

来源

2017-08-28 16:20:01 finch

Thanks finch！你能否给我一个例子？由于slug（或值）只是列表项的一部分，我如何呈现完整列表项目按字母顺序排列，而不仅仅是按字母顺序排列的排列列表？ – hmoore

这是[codepen]（https://codepen.io/brian_kim/pen/PKydOv?editors=0001）排序和映射名称和城市。有关lodash [_sortBy]的更多信息（https://lodash.com/docs/4.17.4#sortBy） – finch

如果有人感兴趣，解决方法是在调用.map()之前对列表项进行排序，因为macbem和finch都提示。我用const创建一个“项目”的构造，我可以再通入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> 
);

来源

2017-08-28 20:34:37 hmoore

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

回答

相关问题