时间戳

首页 > 解决方案 > React + Next js：组件中的交叉 json 值

json - React + Next js：组件中的交叉 json 值

问题描述

首先，我要感谢您花时间提供帮助。我是一名设计师，我不擅长开发东西，所以我别无选择，只能大声呼救。

所以情况就是这样：我被要求在一个元素中添加一个动态的图像（国家标志），该元素从一个 JSON 文件中获取信息，其中包括度假村（其中一个元素是其国家的长名称，即澳大利亚）和国家（按长名称和短代码，即澳大利亚，au）。

我需要在 img src 中打印国家简码，但度假村数组只包含它的长名称。

编码：

这是 JSON 文件呈现信息的方式：

  {
    "Countries":[
       {"name":"Australia",
        "code":"au",
        "continent_code":"oc",
        "slug":"australia"}],
    "Continents":[
       {"name":"Oceania",
        "code":"oc",
        "slug":"oceania"}],
    "Resorts":[{
        "id":"1",
        "resort_name":"Resort Name",
        "encoded_name":"resort-name",
        ...
        "country":"Australia",
        ...}]
  }

这是我的文件位：

const DesktopResort = ({resort}) => (
    <Link href="/resort/[resort]"  as={`/resort/${resort.encoded_name}`}>
        <a target='_blank' className='resort-item'>
            <div className="resort">
                <div className="top">
                    <div className="title">{resort.resort_name}</div>
                    <img className="logo" src="/assets/img/resort-logo-sample.png" />
                    <span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
                    // Down below is the "dynamic" file call
                    <img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
                </div>
                <div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
            </div>
        </a>
    </Link>
)

我知道它现在做得不好，对于这个澳大利亚度假胜地，我的图像 src 是/assets/img/flags/ Australia .svg我需要打印的当然是/assets/img/flags/ au .svg

你会怎么做？

再次感谢！

标签： jsonreactjs

解决方案

我会编写一个小助手函数来根据国家名称查找国家代码。

注意：如果找不到国家/地区或代码不存在，您需要处理应该发生的情况。我只是在这里默认为一个空字符串。

const countryCode = name => {
  const country = yourData.Countries.find(country => country.name === name);
  return country && country.code || '';
};

然后在您将 传递src给您的img.

<img 
  className="flag-icon" 
  src={`/assets/img/flags/${countryCode(resort.country)}.svg`} 
/>

推荐阅读