时间戳

首页 > 解决方案 > 表格元素与 div 的 React/HTML 最佳实践

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

问题描述

账单组件

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

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 类别对齐与项目名称、价格和随之而来的按钮时遇到了一些麻烦。在这种情况下，完全重构我的代码以使用 table/rows/cols 标签会更好吗？请让我知道你的意见。

标签： htmlcssreactjs

解决方案

  1. 编写语义标记
  2. 应用 CSS 让它看起来像你想要的样子

您似乎有表格数据。使用一张桌子。

推荐阅读