时间戳

首页 > 解决方案 > React 地图功能和 CSS 网格

css - React 地图功能和 CSS 网格

问题描述

嗨，伙计们，我正在尝试使用 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€&lt;/div>
        <div className={classes.Add}>
          <div>–&lt;/div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </div>
  );
};

标签： cssreactjscss-grid

解决方案

您可以使用 React Fragment ，而不是将您的字段包装CartItem在 a中。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€&lt;/div>
        <div className={classes.Add}>
          <div>–&lt;/div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </>
  );
};

请注意，除了使用<>and之外，</>您还可以使用<React.Fragment>and </React.Fragment>。一样的效果。

另一种方法是使用display: contents包装div你的CartItem孩子，这会将每个孩子设置在父网格上。不幸的是，这对浏览器的支持有些有限，并带有一些可访问性问题。

推荐阅读