React/HTML表元素与div的最佳实践

这将是通过我的账单组件实例化的我的项目组件

export default function Item (props) {

    return (
      <div className="item">
            <span>{props.itemName}</span>
            <span>$ {(props.price * props.quantity).toFixed(2)}</span>
            <button className='qtyminus' field='quantity' 
    onClick={() => {props.decrementFunction(props.itemName, props.price)}}
    ><span>-</span>
    </button> 
    <button className='qtyplus' field='quantity' 
    onClick={() => {props.incrementFunction(props.itemName, props.price)}}
    ><span>+</span></button>  
    <button className='deleteItem'
    onClick={()=> {props.deleteItemFunction(props.itemName, props.price)}} 
    ><span>x</span>
    </button>
    {/* <div>{props.quantity}</div> */}
      </div>
    )
}

导出默认功能项（道具）{
返回(
{props.itemName}
${（props.price*props.quantity）.toFixed（2）}
{props.decrementFunction（props.itemName，props.price）}
>-
{props.incrementFunction（props.itemName，props.price）}
>+  
{props.deleteItemFunction（props.itemName，props.price）}
>x
{/*{props.quantity}*/}
)
}

这里基本上是bill container div上方的分类栏 列出每个项目的类别

<div className="bill-category">
<div>Item</div>
<div>Price</div>
<div>Quantity</div>
</div>

项目
价格
量

在完成这个组件的过程中，我在调整CSS类别与附带的项目名称、价格和按钮的对齐时遇到了一些问题。在这种情况下，完全重构代码以使用table/rows/cols标记会更好吗？请让我知道你的意见

编写语义标记

应用CSS使它看起来像你想要的样子

---

您似乎有表格数据。使用表。

从个人经验来看，如果您有非常大的数据并且希望动态添加或删除列，那么使用DIV而不是table，您可能会获得一些性能。 但从长远来看，我还是更喜欢table，因为它在语义上更正确，易于开箱即用，并且如果打印或导出，问题会更少

如果您查看提供datatable/网格的大型组件供应商的呈现，您会看到一些供应商正在使用表和一些div，这两种方法都可以在大型项目中扩展和使用，因此很难判断什么是最好的，或者对于一个简单的页面来说是否真的很重要