Reactjs 将React变量传递给“href”属性

我试图通过路径将变量的值传递给href，但我对如何使其工作存在问题：

export const TechnicalInformationPure = ( props: AllProps ) => {
  const { t } = useTranslation();
  const { component } = props;

  let hrefLink = '/solution/components/' + component?.id + '/attachments/' + attachment.id;

  console.log(component)

  return (
    <DetailsBox title={t('catalogPage.componentDetails.specs.technicalInfo')}>
      <Typography variant="body1" component="p" gutterBottom>
        {component?.attachments.technical_docs.map(attachment => (
          <li style={{ listStyleType: 'none' }} key={1}>
            <a target="_blank" rel="noopener noreferrer" href={attachment.toString()}>
              {attachment.filename.toString() + attachment.format.toString()}
            </a>
            {<Link target="_blank" href="HerePath">Download</Link>}
          </li>
        ))
        }
      </Typography>
    </DetailsBox>
  );
};

我确信有些事情我认为不好，但不知道如何解决它。试着这样分配hrefLink：

<Link target="_blank" href={hrefLink}>Download</Link>

完整元素：

---

作品谢谢，我现在有点累了，谢谢！将在11分钟内竖起大拇指-

<Link target="_blank" href={hrefLink}>Download</Link>

<li style={{ listStyleType: 'none' }} key={1}>
  <a target="_blank" rel="noopener noreferrer" href={attachment.toString()}>
    {attachment.filename.toString() + attachment.format.toString()}
  </a>
  <Link target="_blank" href={hrefLink}>Download</Link>
</li>