反応：背景画像は表示されません

Question

私はReactで初めての方です。

私は配列からいくつかの画像を表示しようとしています。しかし、私が間違っているかを把握や、私がここで間違ってやっていることはできません...

HERESに私のコード：

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

私はそれだけでペーストをコピーすることで動作するかどうかを確認してください私の頭の上からこれを書いて、そうではありません。

とにかくお試しください。