Question

问题

我有一些照片另存为png文件，这些照片与React组件位于同一文件夹中，并且也可以正确导入。

如何以及如何以一种好的做法来显示所有图像，假设在下图中显示的适当框中有4张图像，并与它们的名称/价格一起并排显示在图片下方。

在查看带有图片的帖子时，类似于craigslist的画廊设置。

例如：

<img src={Logo} alt=“website logo”/>

<img src={Mogo} alt=“website mogo”/>

<img src={Jogo} alt=“website jogo”/>

<img src={Gogo} alt=“website gogo”/>

我可以用products.map((product, index, image?))...做些什么吗？

代码

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>
  );
}

Answer 1

最好的并排显示方式，您可以通过在主div组件中为css类提供flex-row用于水平视图和flex-column进行垂直显示

Answer 2

用div（<div className="productsContainer">）包装产品列表，并将其显示为带有包装的flex。

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

要渲染图像，请将<img>标签渲染为子标签之一，或将其直接添加到产品中。还要更改数据以包含src。

const { useState } = React;

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

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10, logo: 'https://picsum.photos/150/150?1' },
    { name: "Spider Poster", price: 20, logo: 'https://picsum.photos/150/150?2' },
    { name: "Bat Poster", price: 30, logo: 'https://picsum.photos/150/150?3' }
  ]);

  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 />
      <div className="productsContainer">
        {products.map((product, index) => (
          <Product key={index} product={product}>           
            <img src={product.logo} alt="website logo" />
            
            <button onClick={() => addToCart(index)}>Add to cart</button>
          </Product>
        ))}
      </div>
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);

* {
  box-sizing: border-box;
}

.productsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.products {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  margin: 0 0 1em 0;
  padding: 1em;
  border: 1px solid black;
}

.products img {
  margin: 0.5em 0;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 3

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

products.map((product, index, image?))...?

与此类似吗？

反应-并排显示图像

3 个答案: