React - 並排顯示圖像

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"> ) 包裝產品列表，並將其顯示為帶有 wrap 的 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?))...?

類似的東西？