我正在尝试用 React 中的数据填充表格,但是我遇到了上述错误。
这是填充表格的函数:
let numberOfColumns = props.tabColumns.split(",").length;
let tableData = props.tabRows.split(",");
function generateRows(){
let r = ``;
for (let i=0; i<tableData.length/numberOfColumns; i++){
r =`${r}<tr>`;
for(let j=0; j<numberOfColumns; j++){
r = `${r}<td>${tableData[i*numberOfColumns+j]}</td>`;
}
r =`${r}</tr>`;
}
console.log(r);
return r;
}
这是表格:
<table>
<tbody>
<tr>
{props.tabColumns.split(",").map((column, index) => <th key={"column"+index}>{column}</th>)}
</tr>
{generateRows()}
</tbody>
</table>
数据:
tabColumns: "Name,Age,Occupation",
tabRows: "John,18,Student," +
"Miranda,23,Nurse," +
"Ashley,32,Telephonist," +
"Rose,28,Driver"
最佳答案
除非你确实需要,否则不要将 React 渲染与手动 html 构建混合使用。它首先消除了使用 React 的好处。使用 React 呈现您的行!
function renderRow(tableData, numberOfColumns, i) {
const cells = [];
for (const j = 0; j < numberOfColumns; ++j) {
cells.push(<td>tableData[i*numberOfColumns+j]</td>);
}
return <tr>{cells}</tr>;
}
render() {
const rows = [];
for (let i = 0; i < tableData.length / numberOfColumns; ++i) {
rows.push(renderRow(tableData, numberOfColumns, i);
}
return (
<table>
<tbody>
<tr>
{props.tabColumns.split(",").map((column, index) => <th key={"column"+index}>{column}</th>)}
</tr>
{rows}
</tbody>
</table>
);
}
关于javascript - React : Warning: validateDOMNesting(. ..): 文本节点不能作为 <tbody> 的子节点出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56956391/