Question

我有一张这样的表：

return (
            <tr key={key.dataKey}>
                <td>
                    <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
                </td>
                <td>
                    <Quantity refValue={key.quantity} />
                </td>
                <td>
                    <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
                </td>
                <td>
                    <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button>
                </td>
            </tr>
        )

但是当我试图在这个渲染函数中添加另一个TR时，react会给我一个包装错误。但我无法用简单的div包装它们。如何绕过这个错误？

我想要的是这样的：

return (
            <tr key={key.dataKey}>
                <td>
                    <SuggestBox delay={1000} method={'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
                </td>
                <td>
                    <Quantity refValue={key.quantity} />
                </td>
                <td>
                    <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
                </td>
                <td>
                    <button className="btn" onClick={this.removeItem.bind(this, i)}> X </button>
                </td>
            </tr>

           //Putting this gives me an error..
            <tr>
              <td colspan="4">Some message</td>
            </tr>
        )

Answer 1

自React 16起，您可以使用Fragments。此示例使用short syntax：

return (
    <>
        <tr key={key.dataKey}>
          <td>
            <SuggestBox delay={1000} method={ 'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
          </td>
          <td>
            <Quantity refValue={key.quantity} />
          </td>
          <td>
            <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
          </td>
          <td>
            <button className="btn" onClick={this.removeItem.bind(this, i)}>X</button>
          </td>
        </tr>

        //Putting this gives me an error..
        <tr>
          <td colspan="4">Some message</td>
        </tr>
    </>
)

旧答案：

将它们包裹在<tbody>中，因为您可以在表格中添加multiple tbody tags。根据MDN：

请注意，与<thead>，<tfoot>和<caption>元素不同，允许多个<tbody>元素（如果是连续的），允许长表中的数据行被分成不同的部分，每个部分根据需要单独格式化。

return (
    <tbody>
        <tr key={key.dataKey}>
          <td>
            <SuggestBox delay={1000} method={ 'post'} url={url} onPriceChange={this.handlePrice.bind(this)} index={i}/>
          </td>
          <td>
            <Quantity refValue={key.quantity} />
          </td>
          <td>
            <b>{key.price == 0 ? 'Waiting...' : ' $' + key.price.toFixed(2)}</b>
          </td>
          <td>
            <button className="btn" onClick={this.removeItem.bind(this, i)}>X</button>
          </td>
        </tr>

        //Putting this gives me an error..
        <tr>
          <td colspan="4">Some message</td>
        </tr>
    </tbody>
)

包含在封闭标记中的表行

1 个答案: