Реакция: Предупреждение: 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>
  );
}

Answer 2

Как уже упоминалось, generateRows возвращает строку.Чтобы получить то, что мне было нужно, я должен был передать эту строку парсеру (https://www.npmjs.com/package/html-react-parser), который дал мне правильный вывод.