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 - 如何按字母順序呈現列表

回答

相關問題