Как создать условный рендеринг компонента Link Gatsby и тега <a>для ссылок? - PullRequest
Новая
       22

Как создать условный рендеринг компонента Link Gatsby и тега <a>для ссылок?

0 голосов
/ 04 октября 2019

В официальных документах Gatsby, касающихся компонента Link Gatsby, говорится, что компонент Link используется только для внутренних ссылок, тогда как для внешних ссылок необходимо использовать тег.

Я создаю компонент Button. который имеет встроенный реквизит для ссылок. Проблема в том, что сейчас я должен создать 2 отдельных компонента Button для внутренних и внешних ссылок из-за ограничения.

Моя цель - использовать один freeLink компонент, который можно использовать как внутренний, так ивнешние ссылки

Я пытался создать подкомпонент (Button) для кнопки, но я не уверен в родительском компоненте (freeLink), который требует условного рендеринга. Подкомпонент имеет следующий вид: 

const Button = props => (
    <button className={props.btnType}>
        <span>{props.text}</span>
    </button>
)

Это визуальная логика того, чего я хочу достичь:

  1. Для внутренних ссылок 
<freeLink intLink="/about" btnType="btn-cta" text="Read about us">
</freeLink>

...which will render...

<Link to="/about">
    <button className="btn-cta">
        <span>Read about us</span>
    </button>
</Link>
Это относительно похоже на внешние ссылки 
<freeLink extLink="https://google.com" btnType="btn-cta" text="Visit Our Partner">
</freeLink>

...which will render...

<a href="https://google.com">
    <button className="btn-cta">
        <span>Visit Our Partner</span>
    </button>
</a>

Я довольно новичок в Javascript, Gatsby и React, поэтому не знаю, как применить условный рендеринг на основе примененных реквизитов.

Будем очень благодарны за любые советы, предложения или указания по кодированию компонента freeLink.

PS: я видел Условно используйте ссылку Gatsby в React Compoment но выбранный ответ слишком сложен для меня, чтобы понять, и у меня нет достаточно комментариев, чтобы просить о дальнейшей разработке.

1 Ответ

2 голосов
/ 04 октября 2019

Вы можете попробовать что-то простое, как это: 

const MyLink = (href, text, ...props) => {
  if (href.startsWith("http") { 
    return <a href={href} {...props}>{text}</a>
  } else { 
    return <Link href={href} {...props}>{text}</Link>
  }
}
...