javascript - 带有 Material-UI 的 ReactJS : How to sort an array of Material-UI's alphabetically?

Question

目前，我渲染 Material-UI 的 <Table>'s <TableRow> ( http://www.material-ui.com/#/components/table ) 与一个数组 <TableRow>s并使用 .map() .每个<TableRow>有一个 <TableRowColumn>代表名字，像这样<TableRowColumn>Josh</TableRowColumn> .

但是，如果用户按下按钮，我想对 <TableRow> 进行排序按 <TableRowColumn>'s 字母顺序排列名。所以说例如 10 <TableRow>s ，如果数组 [0] 的名字是 Conny，而数组 [1] 的名字是 Adrian，则希望数组 [1] 成为数组 [0]。

正确的做法是什么？任何指导或见解将不胜感激。

编辑

每一行都会像数组 rows 那样呈现, 具有属性为 firstName 的对象和 favColor :

        {
          rows.map((row) => {
            return(
              <UserRow
                firstName={row.firstName}
                favColor={row.favColor}
              />
            )
          })
        }

每行定义如下:

const UserRow = (props) => {
  const {firstName, favColor} = props

  return (
    <TableRow>
      <TableRowColumn>{firstName}</TableRowColumn>
      <TableRowColumn>{favColor}</TableRowColumn>
    </TableRow>
  )
}

Answer 1

我会在应用将创建 TableRows 的 map 操作之前对数组进行排序。

react 的思维方式是声明式的。这意味着在视觉层面上，您应该提供应显示的元素。因此，在将它们传递给 View 组件之前，它们会被排序。

例如(我不能使用 material-ui 元素，因为示例没有在 stackoverflow 设置中运行。只需将 TableComponent 的所有元素替换为它们的 material-ui alter ego。):

const data = [
  {firstname: "John", lastname: "Rover",  id:12},
  {firstname: "Bob",  lastname: "Taylor", id:24},
  {firstname: "Lucy", lastname: "Heart",  id:43}
]

// The table component is unaware of the data order operations
const TableComponent = ({tableData}) => <table><tbody>
  {tableData.map(d=> <tr key={d.id}>
      <td>{d.firstname}</td>
      <td>{d.lastname}</td>
  </tr>)}
</tbody></table>

// The parent component takes care of feeding the Table
// component with the data in the correct order.  
class App extends React.Component {
  state = { sortBy: "firstname"}
  handleChange = (event) => this.setState(
    {sortBy: event.target.value}
  );
  render () {
    const {data} = this.props; 
    const {sortBy} = this.state;
    const sortedData = data.sort((a,b) => a[sortBy]>b[sortBy]?1:-1)
    return <div>
      Sort by  
      <select value={sortBy} onChange={this.handleChange}>
        <option value="firstname">First Name</option>
        <option value="lastname">Last Name</option>
      </select>
      <h2>The table: </h2>
      <TableComponent tableData={sortedData} />
    </div>
  }
}
  
ReactDOM.render(
  <App data={data} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>