Ich habe eine Komponente namens OrderItem, die ein Objekt mit mehreren Objekten (mindestens zwei) in einer Tabelle als mehrere Zeilen rendert. In der Tabelle befinden sich mehrere OrderItem-Komponenten. Das Problem ist, dass ich in der Renderfunktion der Komponente nicht mehrere Zeilen zurückgeben kann. Ich kann nur eine einzelne Komponente zurückgeben, und wenn ich sie in ein div einpacke, heißt es "<tr> kann nicht als untergeordnetes Element von @ angezeigt werd<div>"

Der Code sieht ungefähr so aus (ich habe ein paar Sachen weggelassen, um die Lesbarkeit zu verbessern)

Parent() {
  render() {
    return (
      <table>
        <tbody>
          {
            _.map(this.state.orderItems, (value, key) => {
              return <OrderItem value={value} myKey={key}/>
            })
          }
        </tbody>
      </table>
    )
  }
}

class OrderItem extends React.Component {
  render() {
    return (
      <div> // <-- problematic div
        <tr key={this.props.myKey}>
          <td> Table {this.props.value[0].table}</td>
          <td> Item </td>
          <td> Option </td>
        </tr>
        {this.props.value.map((item, index) => {
          if (index > 0) { // skip the first element since it's already used above
            return (
              <tr key={this.props.myKey + index.toString()}>
                <td><img src={item.image} alt={item.name} width="50"/> {item.name}</td>
                <td>{item.selectedOption}</td>
              </tr>
            )
          }
        })}
      </div>
    )
  }
}

Ist es eine Möglichkeit, diese mehreren Zeilen zurückzugeben und sie in derselben Tabelle zu haben, ohne sie in ein div zu packen und eine Fehlermeldung zu erhalten? Mir ist klar, dass ich für jede Komponente eine separate Tabelle erstellen kann, aber dadurch wird die Formatierung ein wenig beeinträchtigt.