在反应中渲染嵌套表行

Posted 2021-05-04

我有一张桌子，上面显示了sales_item。

一个sales_item可以有多个sales_item_option。

而且，sales_item_option可以有多个sales_item_option_attribute。

与sales_item的sales_item_option如下所示。

<tbody>
    <tr className={this.renderClassName()} id={this.props.id}>
        <td>{this.props.item_name}</td>
        <td>{this.props.quantity}</td> 
    </tr>
    {::this._renderItemOptions(sales.itemOptions)}
</tbody>

如果没有sales_item_option_attribute它会工作正常，因为它只会渲染<tr>标签，但是，如果有sales_item_option_attribute，它会打破sales_item_table的css

sales_item_option看起来如下。

var sales_item_option = false;
if (optionAttributes.length > 0) {
  var sales_item_option =
    <tbody>
        <tr className={this.renderClassName()} id={this.props.id}>
            <td>{this.props.option_name}</td>
            <td>{this.props.quantity}</td> 
        </tr>               
        {::this._renderListAttributes(optionAttributes)}
    </tbody>
}
else {
  var sales_item_option =
    <tr className={this.renderClassName()} id={this.props.id}>
      <td>{this.props.option_name}</td>
      <td>{this.props.quantity}</td> 
   </tr>
}

由于反应中的render()函数需要包裹在一个封闭的标签中，我使用<tbody>来包装。但它破坏了桌子的css。我尝试用其他标签包装，但没有帮助。如何正确包装以便CSS工作正常？

答案

所以，为了实现我想做的事情，我将反应版本升级到支持<Fragment />的16.2。

const Fragment = React.Fragment;

var sales_item_option = false;
if (optionAttributes.length > 0) {
  var sales_item_option =
    <Fragment>
        <tr className={this.renderClassName()} id={this.props.id}>
            <td>{this.props.option_name}</td>
            <td>{this.props.quantity}</td> 
        </tr>               
        {::this._renderListAttributes(optionAttributes)}
    </Fragment>
}
else {
  var sales_item_option =
     <tr className={this.renderClassName()} id={this.props.id}>
        <td>{this.props.option_name}</td>
        <td>{this.props.quantity}</td> 
     </tr>
}

它工作正常。