css - 在 react 中呈现嵌套表行

Question

我有一张表，显示sales_item .

A 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() React 中的函数需要包裹在一个封闭的标签中，我使用了 <tbody>包裹。但它打破了表格的CSS。我尝试使用其他标签进行包装，但没有用。我怎样才能正确包装它以便 CSS 正常工作？

Answer 1

因此，为了实现我想做的事情，我将 React 版本升级到支持 <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>
}

而且效果很好。