反应 HTML 表格答案

【问题标题】：React HTML table反应 HTML 表格
【发布时间】：2018-10-27 09:09:36
【问题描述】：

我目前正在尝试在 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}
        ]
    }
];

【问题讨论】：

这可能不是您的问题的原因，但是您的表格行不会都具有相同的key 吗？您可以使用j 作为唯一键（也许您的意思是这就是j 存在的原因？）。
我没有收到密钥重复的错误，但仍然感谢您的输入！

标签： reactjs html-table

【解决方案1】：

这应该返回tr 行：

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

但实际上它修改了result 变量，将trs 推送给它而不是返回它们。这会导致result 变量充满tables 和trs。您应该返回map 中的trs，而不是将它们推送到forEach 中的result：

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

【讨论】：

你在想map吗？
好吧，我知道我哪里出错了。为此欢呼，但您的编辑似乎没有成功。都是空的。
@stone 是的，我认为它是地图。
@Wesselink 是的，对不起，我没有给予足够的关注。将 foreach 替换为 map 以使其工作。

【解决方案2】：

您可以尝试从function 返回jsx 而不是推送到array，试试这个。

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>
    );
}

【讨论】：

太棒了！这很有意义！为你的帮助干杯:)
对于仅带有 return 语句的箭头函数，您可以将其写得更短 - const iterateItem = item => item.map(function(){...});，即没有 return 和附加大括号 :)
@Al.G.感谢您的知识

【解决方案3】：

你需要添加打开和关闭<tbody>标签，像这样：

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

【讨论】：

已经有打开和关闭标签，见上面的代码。但感谢您的意见！