React，如何用不同的键渲染静态 json 数据

Question

这是一个静态 json 数据的例子。

我无法从数组中渲染“promoimage”。

我不是 100% 确定如何解决这个问题。我在玩arround，想检查'promoimage'是否存在，但没有返回任何东西？ 任何建议如何实现这一目标？

[
    {
        "title": "some title",
        "promoimage": "image.jpg",
        "url": "#"
    },
    {
        "title": "some title",
        "image": "example.jpg",
        "url": "#"
    },
{
        "title": "some other title",
        "promoimage": "image.jpg",
        "url": "#"
    },
    {
        "title": "title",
        "image": "example.jpg",
        "url": "#"
    },
]

我的 React 组件：

import products from '../product-data.json';
...
export const CustomSlider = () => {
   // Here I'm using react-slick 

 const productList = products.map((product, i) => {
    const uniqueItems = [];
    if (uniqueItems.indexOf(product.imageone) === -1) {
        uniqueItems.push(product.imageone);
    }

   /* This works
     if (product.hasOwnProperty('promoimage')) {
      return true
    }
   */

         return <Product key={i} {...product} />;
        }
    );

  return (
      <Slider>
        {productList}
      </Slider>  
  )
}

Answer 1

代码将所有对象键作为道具发送到Product。特别是{...product}这部分扩展成这样：

<Product 
  key={i}
  title="some title"
  promoimage="image.jpg"
  url="#"
/>

这称为传播。

现在，我怀疑<Product> 不知道如何处理promoimage，但知道如何处理image。我们还没有发送任何image，所以我们必须解决这个问题。我们可以通过修改 product 使其呈现image || promoimage 来做到这一点，或者将我们的解析更改为：

const productList = products.map((product, i) => {
  const uniqueItems = []

  if (uniqueItems.indexOf(product.promoimage) === -1) {
    uniqueItems.push(product.promoimage)
  }

  return (
    <Product
      key={i}
      {...product}
      image={product.image || product.promoimage}
    />
  )
})