如何包装返回多个表行的React组件并避免使用“< tr>不能作为< div>"的孩子出现错误？ [英] How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?

问题描述

我有一个名为OrderItem的组件，它接受一个包含多个对象（至少两个）的对象，并将它们呈现为表中的多个行。表中将有多个OrderItem组件。问题是在组件的渲染功能中，我不能返回多行。我只能返回一个组件，如果我将它们包装在一个div中，则表示< tr> 不能显示为<的子元素; div>

I have a component called OrderItem that takes an object with multiple objects (at least two) inside it, and renders them as multiple rows inside a table. There will be multiple OrderItem components inside the table. The problem is that in the component's render function, I can't return multiple lines. I can only return a single component, and if I wrap them in a div, it says " <tr> cannot appear as a child of <div>"

代码看起来像这样（为了便于阅读，我留下了一些东西）

The code looks something like this (I left some stuff out for easier readability)

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>
    )
  }
}

我有办法吗？返回那些多行并让它们在同一个表中而不将它们包装在div中并得到错误？我意识到我可以为每个组件创建一个单独的表，但这会使我的格式化一点。

Is there a way I can return those multiple rows and have them be in the same table without wrapping them in a div and getting an error? I realize I can make a separate table for each component, but that throws my formatting off a bit.

推荐答案

似乎有没有办法干净地包装它们，所以更简单的解决方案就是将整个表放在组件中，只需要有多个表并找出格式。

It seems there is no way to wrap them cleanly, so the easier solution is to just put the whole table in the component and just have multiple tables and figure out the formatting.

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


class OrderItem extends React.Component {
    render() {
        return (
            <table>
                <tbody>
                   <tr>
                       <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>
                            )
                        }
                    })}
                </tbody>
            </table>
        )
    }
}

这篇关于如何包装返回多个表行的React组件并避免使用“< tr>不能作为< div>"的孩子出现错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！