如何在ReactJS中對HTML表格進行排序

Question

我有array的Objects，我將數據添加到HTML Table。現在我需要按版本對數據進行排序。我如何在React中做類似的事情？

render() { 
    return (
     <div> 
     <div> 
      <Label> We got {this.state.count} elements in our database. </Label> 
     </div> 
     <div> 
      <Table hover striped bordered responsive size="sm" > 
      <thead> 
       <tr> 
       <th>VERSION</th> 
       <th>DATE</th> 
       <th>UUID</th> 
       </tr> 
      </thead> 
      <tbody> 
       {this.state.results.map(result => 
       <tr key={result.fileId}> 
        <td>{result.VERSION}</td> 
        <td>{result.ORIGIN}</td> 
        <td>{result.UUID}</td> 
       </tr> 
      )} 
      </tbody> 
      </Table> 
     </div> 
     </div> 
    ); 
    } 
} 

也許我可以使用一些js腳本，但告訴我如何使用它，我是新與ReactJS。例如，我的版本是0.26.8。

Answer 1

我會在這裏使用lodash的sortBy()功能：

https://lodash.com/docs/4.17.4#sortBy

const sorted = _.sortBy(this.state.results, 'VERSION') 

然後在sorted代替this.state.results

Answer 2

地圖只需確保this.state.results被渲染之前正確排序。

---

最簡單的方法很可能是類似以下內容：

{this.state.results.sort((a, b) => a.VERSION - b.VERSION).map(result => 
    <tr key={result.fileId}> 
     <td>{result.VERSION}</td> 
     <td>{result.ORIGIN}</td> 
     <td>{result.UUID}</td> 
    </tr> 
)} 

---

編輯：既然你說，該版本不是一個數值，而是一個semantic versioning串，你的排序功能需要更復雜一點。我建議你看看this SO question，或者使用覆蓋該用例的one of the many available libraries。

Answer 3

const sorted = results.sort((x,y) => { 
    return parseInt(x.VERSION) - parseInt(y.VERSION); 
}); 

按升序排序