reactjs - 如何根据不同的属性对 React 组件列表进行排序？

Question

所以，这是我前端的代码片段。

{store.results.data.map( result =>
  <ResultItem 
    key={result.id}
    title={result.title}
    description={result.description}
    start_date={result.start_date}
    end_date={result.end_date}
    vendor_name={result.vendor.name}
    buyer_name={result.buyer.name}
    preview_file={result.preview_file}
    status={result.status}
  />
)}

基本上，我将 Redux 存储中的所有数据映射到 ResultItems 中。我希望能够按不同的属性对所有 ResultItems 进行排序，例如 title、description、start_date、end_date、vendor_name 和 buyer_name。

关于如何做到这一点有什么想法吗？

Answer 1

我将创建一个排序组件并用它包装结果项，如下所示:

<Sort by='title'>
{store.results.data.map( result =>
  <ResultItem 
    key={result.id}
    title={result.title}
    description={result.description}
    start_date={result.start_date}
    end_date={result.end_date}
    vendor_name={result.vendor.name}
    buyer_name={result.buyer.name}
    preview_file={result.preview_file}
    status={result.status}
  />
)}
</Sort>

// Note: The 'by' prop passed into <Sort> in my example is hardcoded by you can grab it from redux or set it when user selects something from a list. Also you can pass another prop to indicate whether to sort by ascending or descending order etc

然后在 Sort 组件中，您可以访问像这样的结果项数组 React.Children.toArray 并使用数组的排序方法并向排序方法传递一个“比较”函数。

// Sort.js

import React from 'react';

// Compare function needed by the Sort component
const compare =(a, b) => {
    // you can access the relevant property like this a.props[by]
// depending whether you are sorting by tilte or year, you can write a compare function here, 

  }

const Sort= ({children, by})=> {
If (!by) {
// If no 'sort by property' provided, return original list
return children
}
return React.Children.toArray(children).sort(compare)

}

上述的主要优点是您可以在其他任何地方使用排序组件，并且可以将排序逻辑与初始结果的映射完全分开。