REAGIERFEHLER kann nicht als Kind von erscheinen . Siehe (unbekannt) > thead > th

Ich arbeite an einer React-Rails-App und erhalte immer wieder diesen Fehler in meiner Konsole:

```
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. 
See (unknown) > thead > th.

Ich bin mir nicht sicher, warum das nicht funktioniert. Ich möchte Header (thead) für eine Tabelle verwenden und es hat für jemand anderen funktioniert. Ich würde tbody setzen, aber ich brauche das für den eigentlichen Körper der Tabelle.

Hier ist mein Code für diese Tabelle:

```  
     React.DOM.table
        className: 'table table-bordered'
        React.DOM.thead null,
          React.DOM.th null, 'Description'
          React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for post in @state.posts
            React.createElement Post, key: post.id, post: post, 
            handleDeletePost: @deletePost

** BEARBEITEN Ich habe versucht, das tr-Tag unter thead hinzuzufügen, und das verursacht einen zusätzlichen zusätzlichen Fehler. das ist, was ich meinen Code geändert habe zu:

```
   React.DOM.table
      className: 'table table-bordered'
      React.DOM.thead null
        React.DOM.tr null
          React.DOM.th null, 'Description'
          React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for post in @state.posts
            React.createElement Post, key: post.id, post: post, 
            handleDeletePost: @deletePost

und der nächste Fehler, den ich bekomme, ist: Warnung: validateDOMNesting (…): tr kann nicht als untergeordnetes Element der Tabelle erscheinen. Siehe (unbekannt) > Tabelle > tr. Fügen Sie Ihrem Code ein hinzu, um mit dem vom Browser generierten DOM-Baum übereinzustimmen.

Ich bin neu in der Reaktion und nicht vertraut mit Coffeescript, also frage ich mich, ob es mit dem Abstand oder so etwas zu tun hat. Habe verschiedene Abstände getestet und das hat nicht geholfen. Ich habe den Kopf zusammen genommen und das hat dazu geführt, dass meine App kaputt gegangen ist. Ich bin mir nicht sicher, was das Problem ist

Die einzigen direkten Kinder erlaubt thead sind tr Elementenicht th.

<table>
  <thead>
    <tr>
      <th />
    </tr>
  </thead>
  ...
</table>

Brunnen th sollte unter a verschachtelt werden tr kein thead. Dokumente

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>john</td>
      <td>33</td>
    </tr>
    <tr>
      <td>smith</td>
      <td>22</td>
    </tr>
    <tr>
      <td>jane</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

Fälschlicherweise hatte ich tbody Innerhalb thead

(1)

<thead>
...
  <tbody>
  ...
  </tbody>
</thead>

statt (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Der Wechsel zu (2) hat mein Problem gelöst.

Ich hatte diesen Fehler aufgrund von Fehlern an anderer Stelle in meiner Liste.

Zum Beispiel hat @Sag1v <tbody> Anstatt von </tbody> um den Körper seiner Liste zu schließen, und ich wette, das verursacht den Fehler.

Einfach setzen <TableCell /> hinein in die <TableRow />

zum Beispiel

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';


export default function Untitled() {

  const items = GetItems() //get items from some where...

  return (
    <Table>
    <TableHead>
        <TableRow> // <--- I mean this section
            <TableCell> ID </TableCell>
            <TableCell> name </TableCell>
            <TableCell> last name </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {
            items.map((item, key) => (
                <TableRow key={key}> // <--- I mean this section
                    <TableCell> {item.id} </TableCell>
                    <TableCell> {item.name} </TableCell>
                    <TableCell> {item.last_name} </TableCell>
                </TableRow>
            ))
        }
    </TableBody>
</Table>
    );
}