React 地图功能和 CSS 网格

Question

大家好， 我正在尝试使用 React 中的此代码按列制作 5 个元素的 CSS 网格。 问题是css网格将cartItem视为网格的一个元素，但我希望cartItem（Img，Title，Price，Add，Delete）的每个div都成为网格的一部分。我怎么能那样做？谢谢

const Cartitems = (props) => {
  return (
    <div className={classes.Container}>
      <div></div>
      <div>Items</div>
      <div>Price</div>
      <div>Quantity</div>
      <div>Remove</div>
      {props.orders.map((val, i) => {
        return val.num === 0 ? null : (
          <CartItem number={val.num} color={val.color} />
        );
      })}
    </div>
  );
};

const CartItem = (props) => {
  return (
    <div className={classes.Container}>
        <div className={classes.Img}></div>
        <div className={classes.Title}>
          Surf style balance board {props.color}
        </div>
        <div className={classes.Price}>149.00€</div>
        <div className={classes.Add}>
          <div>–</div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </div>
  );
};

Answer 1

您可以使用 React 片段，而不是将 CartItem 的字段包装在 div 中。这将导致您的购物车项目的所有子项在 DOM 中彼此相邻：

const CartItem = (props) => {
  return (
    <>
        <div className={classes.Img}></div>
        <div className={classes.Title}>
          Surf style balance board {props.color}
        </div>
        <div className={classes.Price}>149.00€</div>
        <div className={classes.Add}>
          <div>–</div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </>
  );
};

注意，除了使用<> 和</>，您还可以使用<React.Fragment> 和</React.Fragment>。效果一样。

另一种方法是在 div 上使用 display: contents 包装您的 CartItem 子级，这会将每个子级设置在父网格上。不幸的是，这有 somewhat limited browser support 和一些 accessibility issues。