Reactjs 反应：背景图像赢了'；不显示_Reactjs

Reactjs 反应：背景图像赢了'；不显示

reactjs

Reactjs 反应：背景图像赢了'；不显示,reactjs,Reactjs,我是新手我正在尝试显示阵列中的一些图像。但是我不知道我做错了什么，或者我做错了什么这是我的密码： 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 cl

我是新手

我正在尝试显示阵列中的一些图像。但是我不知道我做错了什么，或者我做错了什么

这是我的密码：

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

功能产品（道具）{
const content=props.products.map（（产品）=>
查看详细信息
{product.header}
{product.desc}
{产品价格}
);
返回(
{content}
);
}
常数乘积=[
{id:1，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“你好，世界”，描述：“欢迎学习反应！”，价格：“$999.00”}，
{id:2，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“安装”，说明：“您可以从npm安装React”，价格：“$699.00”}
];
const productImg={
背景图片：“url（'+products.img+'）”
};
ReactDOM.render(
,
document.getElementById（'content'）
);

问题是，产品是一个数组，要访问img，还需要指定索引，如下所示：

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

您正在组件中传递products数组，因此不要像这样使用它，而是在组件本身中定义

backgroundImage

。试试这个：

功能产品（道具）{
const content=props.products.map（（产品）=>
查看详细信息
{product.header}
{product.desc}
{产品价格}
);
返回(
{content}
);
}
常数乘积=[
{id:1，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“你好，世界”，描述：“欢迎学习反应！”，价格：“$999.00”}，
{id:2，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“安装”，说明：“您可以从npm安装React”，价格：“$699.00”}
];
ReactDOM.render(
,
document.getElementById（'content'）
);
问题是，产品是一个数组，要访问img，还需要指定索引，如下所示：
const productImg = {
    backgroundImage: 'url(' + products[index].img +')'
};

您正在组件中传递products数组，因此不要像这样使用它，而是在组件本身中定义backgroundImage
。试试这个：

功能产品（道具）{
const content=props.products.map（（产品）=>
查看详细信息
{product.header}
{product.desc}
{产品价格}
);
返回(
{content}
);
}
常数乘积=[
{id:1，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“你好，世界”，描述：“欢迎学习反应！”，价格：“$999.00”}，
{id:2，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“安装”，说明：“您可以从npm安装React”，价格：“$699.00”}
];
ReactDOM.render(
,
document.getElementById（'content'）
);
如下所示：
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')
);

功能产品（道具）{
const content=props.products.map（（产品）=>
查看详细信息
{product.header}
{product.desc}
{产品价格}
);
返回(
{content}
);
}
常数乘积=[
{id:1，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“你好，世界”，描述：“欢迎学习反应！”，价格：“$999.00”}，
{id:2，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“安装”，说明：“您可以从npm安装React”，价格：“$699.00”}
];
const getProductImageStyle=product=>({
背景图片：“url（'+product.img+'）”
});
ReactDOM.render(
,
document.getElementById（'content'）
);

我是从头开始写的，所以不确定它是否可以通过复制粘贴来实现
无论如何，试着让我们知道。
下面的事情就可以了：
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')
);

功能产品（道具）{
const content=props.products.map（（产品）=>
查看详细信息
{product.header}
{product.desc}
{产品价格}
);
返回(
{content}
);
}
常数乘积=[
{id:1，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“你好，世界”，描述：“欢迎学习反应！”，价格：“$999.00”}，
{id:2，img:'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg，标题：“安装”，说明：“Yo”