React HTML表格

Question

我目前正在尝试在React中使用HTML表格，但是有些地方似乎不太对。我确实可以得到一个渲染输出，但是会出现以下错误：<tr> cannot appear as a child of <div>。

我尝试在网上找到解决方法，但是我使用的技术似乎并不常用，所以如果我做错了，请指教。
提前感谢！

getTableContent = (arr) => {
    let result = [];
    arr.forEach(function (item, i) {
        result.push(
            <table key={item.productType}>
                <thead>{item.productType}</thead>
                <tbody>
                    {item.contents.forEach(function (nextItem, j) {
                        result.push(
                            <tr key={nextItem.type}>
                                <td>{nextItem.type}</td>
                                <td>{nextItem.count}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
            );
    });
    return result;
};

render() {
    return (
            <div>{this.getTableContent(productSpecification)}</div>
    );
}

数据如下所示：

const productSpecification = [
    {
        productType: "abc", contents: [
            {type: "abc", count: 231},
            {type: "abc", count: 56},
            {type: "abc", count: 54},
            {type: "abc", count: 544},
            {type: "abc", count: 54},
            {type: "abc", count: 564},
            {type: "abc", count: 4},
            {type: "abc", count: 4564},
            {type: "abc", count: 4531},
            {type: "abc", count: 234},
            {type: "abc", count: 57},
            {type: "abc", count: 7}
        ]
    }
];

- Bram Wesselink

---

这可能不是你问题的原因，但是你的表格行不都有相同的“key”吗？你可以使用“j”作为唯一的键（也许你本来就是这个意思，这就是为什么存在“j”？）。 - stone

我没有收到“键是重复的”错误，但还是感谢您的输入！ - Bram Wesselink

Answer 1

不要使用 array 存储数据，而是从 function 直接返回 jsx。尝试这样做：

getTableContent = (arr) => {
    const iterateItem = (item) => {
       return item.map(function (nextItem, j) {
         return (
            <tr key={nextItem.type}>
               <td>{nextItem.type}</td>
               <td>{nextItem.count}</td>
            </tr>
         );
       })
    }
    return arr.map(function (item, i) {
        return (
            <table key={item.productType}>
            <thead>{item.productType}</thead>
                <tbody>
                    {iterateItem(item.contents)}
                </tbody>
            </table>
        );
    });
};

render() {
    return (
            <div>{this.getTableContent(productSpecification)}</div>
    );
}

- Midhun G S

---

对于只有一个返回语句的箭头函数，你可以更简洁地编写它 - const iterateItem = item => item.map(function(){...});，即不需要使用 return 和额外的大括号 :) - Al.G.

Answer 2

你需要添加开头和结尾的<tbody>标签，就像这样：

<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
...
</tbody>
</table>

- S. Mac

---

已经有开放和关闭标签了，请参见上面的代码。但是感谢您的输入！ - Bram Wesselink

Answer 3

这应该返回tr行：

{item.contents.forEach(function (nextItem, j) {
    result.push(
        <tr key={nextItem.type}>
            <td>{nextItem.type}</td>
            <td>{nextItem.count}</td>
        </tr>
    )
})}

但实际上它修改了result变量，将tr推入其中而不是返回它们。这会导致result变量充满了table和tr。你应该在map中返回tr，而不是在forEach中将它们推到result中：

{item.contents.map(function (nextItem, j) {
    return (
        <tr key={nextItem.type}>
            <td>{nextItem.type}</td>
            <td>{nextItem.count}</td>
        </tr>
    )
})}

- Al.G.

---

你在考虑使用 map 吗？ - stone

好的，我看到了我的错误所在。谢谢你指出来，但是你的编辑似乎没有起作用。它什么都没有。 - Bram Wesselink

@stone 是的，我想把它看作是一个映射。 - Al.G.

@Wesselink 对不起我没有注意到。用map替换foreach让它正常运行。 - Al.G.