Передача переменной React в атрибут "href"

#reactjs #typescript

Вопрос:

Я пытаюсь передать значение переменной с путем к 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>}

Я уверен, что что-то я думаю плохое, но понятия не имею, как это решить, работая так, как я хочу.

Ответ №1:

Попробуйте назначить 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>

Ответ №2:

Вы можете сделать это точно так же, как вы встраиваете переменные в ванильный JavaScript. То есть с обратными метками, знаком доллара и фигурными скобками.

Я работал с API YouTube и хотел заставить видео воспроизводиться, когда пользователь нажимает на миниатюру. Вот как я это сделал:

  href={`https://www.youtube.com/watch?v=${video.id.videoId}`}