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

问题是，products是一个数组，要访问你需要指定索引的img，如下所示：

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

您正在组件中传递products数组，因此不要使用它，而是在组件本身中定义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')
);

我是从头顶写下来的，所以不确定它是否只能复制粘贴。

无论如何，请尝试告诉我们。

反应：背景图片不会显示

2 个答案: