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名称，价格和按钮来调整CSS类别的对齐方式。在这种情况下，完全重构我的代码以使用表/行/列标记是更好的做法吗？请让我知道您的意见。

Answer 1

写语义标记
应用CSS使它看起来像您想要的样子

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

Answer 2

从个人经验来看，如果使用DIV而不是TABLE，万一您有非常大的数据并且想要动态添加或删除列，则可能会获得一些性能。但是从长远来看，我仍然偏爱表，因为它在语义上更正确，开箱即用，并且在打印或导出时产生的问题更少。

如果查看提供数据表/网格的大型组件供应商的渲染图，您会发现有些供应商正在使用表和某些div，这两种方法都可以扩展并且可以在大型项目中使用，因此很难说出什么是最好的，或者如果对简单的页面真的很重要。

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

2 个答案: