反應：背景圖片不會顯示

Question

我是React新手。

我想顯示一些數組中的圖像。但我無法弄清楚什麼是錯的或我在做什麼錯在這裏...

繼承人我的代碼：

function Product(props) { 
    const content = props.products.map((product) => 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
        <div className="product-item"> 
         <div className="product-item_img" style={productImg} data-product-image={product.img}> 
          <div className="product-item_img__view"> 
           <button className="button button_g" data-toggle="#modal">View details</button> 
          </div> 
         </div> 
         <header className="product-item_header" data-product-name={product.header}>{product.header}</header> 
         <div className="product-item_desc">{product.desc}</div> 
         <footer className="product-item_footer">{product.price}</footer> 
        </div> 
    </article> 
); 
    return (
    <div className="flex-row"> 
     {content} 
    </div> 
); 
} 

const products = [ 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
]; 

const productImg = { 
    backgroundImage: 'url(' + products.img +')' 
}; 

ReactDOM.render(
    <Product products={products} />, 
    document.getElementById('content') 
); 

Answer 1

問題是，產品是一個數組，訪問您所需要的IMG還指定了索引，就像這樣：

const productImg = { 
    backgroundImage: 'url(' + products[index].img +')' 
}; 

您傳遞組件的產品陣列，所以不是用它想，定義組件本身的backgroundImage。試試這個：

function Product(props) { 
 
    const content = props.products.map((product) => 
 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
 
     <div className="product-item"> 
 
      <div className="product-item_img" style={{background: 'url('+ product.img + ') 50% 10% no-repeat', height: '200px', width: '200px'}} data-product-image={product.img}> 
 
       <div className="product-item_img__view"> 
 
        <button className="button button_g" data-toggle="#modal">View details</button> 
 
       </div> 
 
      </div> 
 
      <header className="product-item_header" data-product-name={product.header}>{product.header}</header> 
 
      <div className="product-item_desc">{product.desc}</div> 
 
      <footer className="product-item_footer">{product.price}</footer> 
 
     </div> 
 
    </article> 
 
); 
 
    return (
 
    <div className="flex-row"> 
 
     {content} 
 
    </div> 
 
); 
 
} 
 

 
const products = [ 
 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
 
]; 
 

 
ReactDOM.render(
 
    <Product products={products} />, 
 
    document.getElementById('content') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='content'></div>

Answer 2

東西如下會做：

function Product(props) { 
    const content = props.products.map((product) => 
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12"> 
     <div className="product-item"> 
     <div className="product-item_img" style={getProductImageStyle(product)} data-product-image={product.img}> 
     <div className="product-item_img__view"> 
      <button className="button button_g" data-toggle="#modal">View details</button> 
     </div> 
     </div> 
     <header className="product-item_header" data-product-name={product.header}> 
     {product.header} 
     </header> 
     <div className="product-item_desc">{product.desc}</div> 
     <footer className="product-item_footer">{product.price}</footer> 
     </div> 
    </article> 
); 
    return (
    <div className="flex-row"> 
     {content} 
    </div> 
); 
} 

const products = [ 
    {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"}, 
    {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"} 
]; 

const getProductImageStyle = product => ({ 
    backgroundImage: 'url(' + product.img +')' 
}); 

ReactDOM.render(
    <Product products={products} />, 
    document.getElementById('content') 
); 

我寫這從我的頭頂，所以不知道是否它的工作方式只是複製粘貼。

無論如何，請嘗試並讓我們知道。