Javascript React-并排显示图像

问题

我有一些照片保存为

png

文件，它们与React组件位于同一文件夹中，并且也被正确导入

如何以及什么是显示所有图像的良好实践方式，比如说，在下图所示的相应框中有4个图像，并将它们并排显示，同时在图像下方对齐它们的名称/价格

类似于craigslist的图库设置，当查看带有图像的帖子时

例：

我可以用

products.map（（产品、索引、图像？）做些什么吗？

代码

const Product = props => {
  const { product, children } = props;
  return (
    <div className="products">
      {product.name} ${product.price}
      {children}
    </div>
  );
};

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10 },
    { name: "Spider Poster", price: 20 },
    { name: "Bat Poster", price: 30 }
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = index => {
    setCart(cart.concat(products[index]));
  };

  const calculatePrice = () => {
    return cart.reduce((price, product) => price + product.price, 0);
  };

  return (
    <div className="App">
      <h2>Shopping cart example using React Hooks</h2>
      <hr />
      {products.map((product, index) => (
        <Product key={index} product={product}>
          <button onClick={() => addToCart(index)}>Add to cart</button>
        </Product>
      ))}
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

const Product=props=>{
const{product，children}=props；
返回(
{product.name}${product.price}
{儿童}
);
};
函数App（）{
常量[产品]=使用状态([
{名称：“超人海报”，价格：10}，
{名称：“蜘蛛海报”，价格：20}，
{名称：“蝙蝠海报”，价格：30}
]);
const[cart，setCart]=useState（[]）；
const addToCart=索引=>{
setCart（cart.concat（产品[索引]）；
};
常量计算价格=（）=>{
返回购物车。减少（（价格，产品）=>price+product.price，0）；
};
返回(
使用React钩子的购物车示例

{products.map（（产品，索引）=>(
addToCart（索引）}>添加到购物车
))}
您的购物车总数：${calculatePrice（）}
{cart.map（（产品，索引）=>(
{" "}
))}
);
}

---

并排显示这些内容的最佳方式您可以通过在主div组件中为水平视图提供css类

弹性行

，为垂直视图提供

弹性列

并排显示这些内容的最佳方式您可以通过为水平视图和垂直视图提供css类

弹性行

来显示这些内容

flex column

用于主div组件中的垂直视图

const Product=props=>{
const Product = props => {
  const { product, children, image } = props;
  return (
    <div className="products">
      {product.name} ${product.price} ${product.image}
      {children}
    </div>
  );
};

const{product，children，image}=props；
返回(
{product.name}${product.price}${product.image}
{儿童}
);
};

products.map（（产品、索引、图像？）.？

与此类似的东西？

constproduct=props=>{
const{product，children，image}=props；
返回(
{product.name}${product.price}${product.image}
{儿童}
);
};

products.map（（产品、索引、图像？）.？

---

与此类似的内容？

使用div（

）包装产品列表，并将其显示为带有包装的flex

将项目（

产品

）的宽度设置为

50%

或更小

要渲染图像，请渲染

const{useState}=React；
常量乘积=（{Product，children}）=>(
{product.name}${product.price}
{儿童}
);
函数App（）{
常量[产品]=使用状态([
{名称：“超人海报”，价格：10，标志：'https://picsum.photos/150/150?1' },
{名称：“蜘蛛海报”，价格：20，徽标：'https://picsum.photos/150/150?2' },
{名称：“蝙蝠海报”，价格：30，徽标：'https://picsum.photos/150/150?3' }
]);
const[cart，setCart]=useState（[]）；
const addToCart=索引=>{
setCart（cart.concat（产品[索引]）；
};
常量计算价格=（）=>{
返回购物车。减少（（价格，产品）=>price+product.price，0）；
};
返回(
使用React钩子的购物车示例

{products.map（（产品，索引）=>(
addToCart（索引）}>添加到购物车
))}
您的购物车总数：${calculatePrice（）}
{cart.map（（产品，索引）=>(
{" "}
))}
);
}
ReactDOM.render(
,
根
);
*{
框大小：边框框；
}
.产品容器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.产品{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：45%；
边际：0.01米0；
填充：1em；
边框：1px纯黑；
}
.产品img{
保证金：0.5em0；
}
使用div（
）包装产品列表，并使用包装将其显示为flex

将项目（
产品
）的宽度设置为
50%
或更小

要渲染图像，请渲染


const{useState}=React；
常量乘积=（{Product，children}）=>(
{product.name}${product.price}
{儿童}
);
函数App（）{
常量[产品]=使用状态([
{名称：“超人海报”，价格：10，标志：'https://picsum.photos/150/150?1' },
{名称：“蜘蛛海报”，价格：20，徽标：'https://picsum.photos/150/150?2' },
{名称：“蝙蝠海报”，价格：30，徽标：'https://picsum.photos/150/150?3' }
]);
const[cart，setCart]=useState（[]）；
const addToCart=索引=>{
setCart（cart.concat（产品[索引]）；
};
常量计算价格=（）=>{
返回购物车。减少（（价格，产品）=>price+product.price，0）；
};
返回(
使用React钩子的购物车示例

{products.map（（产品，索引）=>(
addToCart（索引）}>添加到购物车
))}
您的购物车总数：${calculatePrice（）}
{cart.map（（产品，索引）=>(
{" "}
))}
);
}
ReactDOM.render(
,
根
);
*{
框大小：边框框；
}
.产品容器{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.产品{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：45%；
边际：0.01米0；
填充：1em；
边框：1px纯黑；
}
.产品img{
保证金：0.5em0；
}

您可以