反应：警告：validateDOMNesting(...)：文本节点不能作为 <tbody> 的子节点出现

Question

我正在尝试从 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"

结果如下所示： 问题出在 generateRows 函数的某个地方。罪魁祸首可能是什么？提前致谢。

Answer 1

除非您真的需要，否则不要将 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>
  );
}