Question

我有一张表格，显示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

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

由于react中的render()函数需要包含在封闭标记中，因此我使用<tbody>进行换行。但它破坏了桌子的css。我尝试用其他标签包装，但没有帮助。如何正确包装以便CSS工作正常？

Answer 1

因此，为了达到我想要的目的，我将反应版本升级到支持<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>
}

它工作正常。

在反应中渲染嵌套表行

1 个答案: