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

Question

我有一个文件数组，我希望显示某些文件并进行超链接。我正在使用 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>
        )
    }
    
    
    
}

}

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

Answer 2

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

Answer 3

如果我正确理解了您的其余问题，我相信您的问题只是在不正确的位置使用了地图。 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>
        )
    }
    
    
    
}