我如何在地图方法中创建超链接？

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

如果我对你问题的其余部分理解正确，我相信你的问题只是在不正确的点使用了地图。 map 所做的是 returns 一个值数组，在这种情况下将是一个适用标签数组。

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

Answer 3

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

我如何在地图方法中创建超链接？

How can i create hyperlinks within the map method?

javascript

arrays

hyperlink

reactjs