Условно используйте Gatsby Link в React Compoment

Question

У меня есть компонент реагирования, который содержит в себе несколько подкомпонентов. Я хочу обернуть эти подкомпоненты в тег привязки. Теперь, иногда этот тег привязки будет ссылаться на подстраницу, в других случаях он будет ссылаться на внешнюю страницу.

Теперь я - Гэтсби, и это означает, что использование тега <a> или компонента <Link> зависит от того, ссылаюсь ли я на внутреннюю страницу (<Link>) или на внешнюю страницу. (<a>). Подробнее смотрите здесь: https://www.gatsbyjs.org/docs/gatsby-link/

Теперь я подумал, что смогу сделать это, проверив, использовал ли я какой-то нестандартный реквизит - как это:

export const ListItem = props => (
  <div>
    {props.goTo && <Link to={props.goTo}>}
    {props.linkTo && <a href={props.linkTo}>}

        <SubcompomentOne>...</SubcompomentOne>
        <SubcompomentTwo>...</SubcompomentTwo>

    {props.linkTo && </a> }
    {prpos.goTo && </Link> }
  </div>
)

Идея в том, что если я использую опору linkTo, то я буду использовать тег <a>. Если я использую goTo опору, то я буду использовать <Link> компонент. И если я не буду использовать ни то, ни другое, я просто выведу остальные подкомпоненты без тега <Link> или <a>.

По крайней мере, так я бы хотел, чтобы это работало, но что-то не работает должным образом.

Итак, мне интересно, есть ли способ условно использовать теги <Link> или <a> в зависимости от того, является ли ссылка внутренней или внешней? Если да, есть идеи как?

Спасибо.

Answer 1

Открыть тег jsx, например (Link и a в вашем случае) и надеясь закрыть его в другом месте, невозможно.То, как вы написали, похоже на шаблонизацию языка на стороне сервера для рендеринга вещей внутри других тегов.

В вашем случае вы можете использовать другой подход.Один из подходов будет следующим:

Сначала присвойте всем своим детям (например, SubcompomentOne, SubcompomentTwo) переменную.используйте React.Fragment, если у вас есть несколько дочерних элементов.

const children = (<React.Fragment>
    <SubcompomentOne>...</SubcompomentOne>
    <SubcompomentTwo>...</SubcompomentTwo>
  </React.Fragment>
);

Затем вы можете определить, какой тег отображать и какие дочерние элементы внутри них, как показано ниже

return (<div>
 {
  props.goTo ?
   (<Link to={props.goTo}>{children}</Link>) : 
   (<a href={props.linkTo}>{children}</a>)
 }
 </div>);