reactjs - 包裹在封闭标记中的表格行

我有一张这样的 table :

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

最佳答案

从 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:

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

关于reactjs - 包裹在封闭标记中的表格行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41227576/