Javascript 如何在map方法中创建超链接？

我有一个文件数组，我想显示和超链接某些文件。我使用的是map方法，当只显示1个文件时，它会正确链接。当必须显示多个文件时，我需要一些语法方面的帮助

render() {

  const mappings = {
    'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
    'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
    'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
    'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
  }

   if (this.props.channelSelectedData.length >= 1){
        return(
            <div className="channel-detail-box">
                
                    <p>Outages:
                      <a href={mappings[this.props.channelSelectedData.map(inspection => {
                          return inspection.outage 
                          })]}>
                      {this.props.channelSelectedData.map(inspection => {
                           return inspection.outage + ' '
                          })}</a> 
                    </p> 
            </div>
        )
    }
    else {
        return (
            <div>
                <p>No data found</p>
            </div>
        )
    }
    
    
    
}

render（）{
常量映射={
'P1011'：'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls'，
'P1511'：'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls'，
'P1711'：'http://192.168.191.128:8080/PNGS-P1711\u已验证\u结果\u 3.xlsx'，
“P1911”：http://192.168.191.128:8080/PLGS_Unit_1-PL1911_验证结果2.xlsx'，
}
如果（this.props.channelSelectedData.length>=1）{
返回(
停电：

)
}
否则{
返回(
没有找到任何数据

)
}
}

---

}这就是你要找的吗

render() {
  const mappings = {
    'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
    'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
    'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
    'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
  }

  const { channelSelectedData } = this.props

  if (channelSelectedData.length === 0) {
    return <div>
      <p>No data found</p>
    </div>
  }

  return <div className="channel-detail-box">
    <p>Outages: {channelSelectedData.map(({ outage }) => <a href={mappings[outage]}>{outage}</a>)}</p>
  </div>
}

render（）{
常量映射={
'P1011'：'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls'，
'P1511'：'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls'，
'P1711'：'http://192.168.191.128:8080/PNGS-P1711\u已验证\u结果\u 3.xlsx'，
“P1911”：http://192.168.191.128:8080/PLGS_Unit_1-PL1911_验证结果2.xlsx'，
}
const{channelSelectedData}=this.props
如果（channelSelectedData.length==0）{
返回
没有找到任何数据

}
返回
中断：{channelSelectedData.map（（{output}）=>）}

}

如果我正确理解了你问题的其余部分，我相信你的问题只是在错误的地方使用了map。map所做的是返回一个值数组，在本例中，它是一个适用标记数组

render() {

  const mappings = {
    'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
    'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
    'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
    'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
  }

   if (this.props.channelSelectedData.length >= 1){
        return(
            <div className="channel-detail-box">
                
                    <p>Outages:
                      <>
                      {
                      this.props.channelSelectedData.map(chanel=>{
                          return (
                          <a href={mappings[chanel]}>
                            {chanel+' '}
                          </a> )

                        })
                      }
                      </>
                    </p> 
            </div>
        )
    }
    else {
        return (
            <div>
                <p>No data found</p>
            </div>
        )
    }
    
    
    
}

render（）{
常量映射={
'P1011'：'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls'，
'P1511'：'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls'，
'P1711'：'http://192.168.191.128:8080/PNGS-P1711\u已验证\u结果\u 3.xlsx'，
“P1911”：http://192.168.191.128:8080/PLGS_Unit_1-PL1911_验证结果2.xlsx'，
}
如果（this.props.channelSelectedData.length>=1）{
返回(
停电：
{
this.props.channelSelectedData.map（香奈儿=>{
返回(
)
})
}

)
}
否则{
返回(
没有找到任何数据

)
}
}

常量映射={
'P1011'：'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls'，
'P1511'：'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls'，
'P1711'：'http://192.168.191.128:8080/PNGS-P1711\u已验证\u结果\u 3.xlsx'，
“P1911”：http://192.168.191.128:8080/PLGS_Unit_1-PL1911_验证结果2.xlsx'，
};
如果（！channelSelectedData | | channelSelectedData.length(
));
返回(
中断：{links}

);

是的，这是我如何使用地图的问题。谢谢！！尽可能尝试分解对象，这将导致代码更清晰。你应该看看这个。不管怎样，很高兴我帮了忙，今天过得很愉快！如果

else

语句指定了

return

，通常可以不使用它们。在这里读到：@Ross Sheppard是的，很好！我已经更新了我的答案

const mappings = {
  'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
  'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
  'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
  'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
};

if (!channelSelectedData || channelSelectedData.length <= 0) {
  return (
    <div>
      <p>No data found</p>
    </div>
  );
}

const links = channelSelectedData.map(({ outage }) => (
  <a href={mappings[outage]}>{outage}</a>
));

return (
  <div className="channel-detail-box">
    <p>Outages: {links}</p>
  </div>
);