表元素與div的React / HTML最佳實踐

Question

帳單組成部分

這將是我的項目組件，可通過我的賬單組件實例化

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

這基本上是票據容器div上方的類別欄，其中列出了每個項目的類別

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

在完成此組件的過程中，我很難用其附帶的商品名稱，價格和按鈕來調整CSS類別的對齊方式。 在這種情況下，完全重構我的代碼以使用表/行/列標記是更好的做法嗎？ 請讓我知道您的意見。

Answer 1

1. 編寫語義標記
2. 應用CSS使其看起來像您想要的方式

您似乎具有表格數據。 使用表格。

Answer 2

從個人經驗來看，如果您使用DIV而不是TABLE，以防您擁有大量數據並且想要動態添加或刪除列，則可能會獲得一些性能。 但是從長遠來看，我仍然偏愛表，因為它在語義上更正確，開箱即用，並且在打印或導出時產生的問題更少。

如果查看提供數據表/網格的大型組件供應商的渲染圖，您會看到一些使用表和一些div的方法，這兩種方法都可以擴展並且可以在大型項目中使用，因此很難說出什么是最好的，或者真的是最好的。簡單的頁面很重要。