时间戳

首页 > 解决方案 > React，如何用不同的键渲染静态 json 数据

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

问题描述

这是静态 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": "#"
    },
]

我的反应组件：

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>  
  )
}

标签： arraysjsonreactjsobject

解决方案

该代码将所有对象键发送到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}
    />
  )
})

推荐阅读