时间戳

首页 > 解决方案 > 将 React 变量传递给“href”属性

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

问题描述

我尝试使用路径传递变量的值 to 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="HerePath">Download</Link>}

我确信我认为不好的事情，但不知道如何按我的意愿解决它。

标签： reactjstypescript

解决方案

尝试这样分配hrefLink：

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

全<li>元素：

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

推荐阅读