如何在 React JS 中优化 TD

Question

我正在优化 React JS 中的代码，我几乎优化了一半的代码。但是现在我想优化td如何实现这一目标..

let  th = ["createdAt", "name", "email", "mobile"], td = []

我已经针对标头优化的代码并且工作正常

{th.map((item, index) => {
return <th key={index} onClick={() => this.setState({column: item}, this.sortData)}>{item}{imgSource}</th>
})}

我正在从 api 获取数据。我想要仅使用单个 td 的此代码的替代选项

{this.state.data.people && this.state.data.people.map((item, index) => {
return <tr key={index}>
<td><h5>{item.createdAt}</h5></td>
<td><h5>{item.name}</h5></td>
<td><h5>{item.email}</h5></td>
<td><h5>{item.mobile}</h5></td>
</tr>
})}

Answer 1

我想你想以更短的方式编写td标签的生成。但这不会提高性能。试试这个：

{this.state.data.people && this.state.data.people.map((item, index) => {
return <tr key={index}>
{
th.map((thItem, trIndex) => <td><h5>{item[thItem]}</h5></td>)
}
</tr>
})}