javascript - 反应渲染表 - 将正文数据与标题数据顺序匹配？

Question

在 React 中，我正在渲染一个表格，其中表格标题是“id”值：

"header": [
    {"id": "a"},
    {"id": "b"},
    {"id": "c"},
    {"id": "d"},
    {"id": "e"}
]

表体从以下位置呈现：

"body": [
    {
        "d": "Hello",
        "e": "Hey",
        "b": "Hi",
        "a": "Yo",
        "c": "Hella"
    },
    {
        "d": "Hello2",
        "e": "Hey2",
        "b": "Hi2",
        "a": "Yo2",
        "c": "Hella2"
    }
]

我正在尝试使“body”对象的键与“header”对象“id”值的顺序相同（因为它们具有相同的值）。

所以最终的结果将是......

<table>
    <thead>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Yo</td>
            <td>Hi</td>
            <td>Hella</td>
            <td>Hello</td>
            <td>Hey</td>
        </tr>
        <tr>
            <td>Yo2</td>
            <td>Hi2</td>
            <td>Hella2</td>
            <td>Hello2</td>
            <td>Hey2</td>
        </tr>
    </tbody>
</table>

到目前为止我的代码：

render() {
    const header = header.map(item => {
        return <td>{item.id}</td>;
    });
    
    return (
        <table>
            <thead>
                <tr>{header}</tr>
            </thead>
            <tbody>
                {body}
            </tbody>
        </table>
    );
}

这里的问题是我如何将 {body} 编码为如上所述的工作，这是我到目前为止的工作（但由于不确定我需要做什么，所以没有排序）：

 const body = body.map(item => {
        return (
            <tr>
                {Object.keys(item).map(x => {
                    return <td>{item[x}</td>;
                })}
            </tr>
        );
    });

标签： javascriptarraysreactjssorting

Answer 1

好的，所以我接受了@Chris G 和@Yevgen Gorbunkov 的评论，我想出了一个对我有用的非常简单的解决方案。

const body = body.map(item => {
        return (
            <tr>
                {Object.keys(item).map(x => {
                    return <td>{item[headerItem.id}</td>;
                })}
            </tr>
        );
    });