Как решить логическое утверждение в Гэтсби (реагировать JS)?

Question

Кажется, я не могу обернуться вокруг логического утверждения в реакции. js ...

Вот мой код:

<li key={item.title}>
  {item.child_items 
    ? <Link 
      activeClassName="active"
      partiallyActive={true}
      aria-haspopup="true" 
      to={`/${item.slug}`}>{item.title}</Link> //reference line

    : <Link to={`/${item.slug}`}>{item.title}</Link>
  }
</li>

Эта часть работает. То, что я пытаюсь сделать sh, заключается в том, что если item.title равен "home", то ссылочная строка (с комментариями выше) будет иметь вид to={ / }>{item.title}</Link>

Я думаю, мне нужна здесь функция который рендерит { / } vs { / $ {item.slug} } или я просто пишу во вложенном операторе if then?

Answer 1

Тройка в значении реквизита должна дать вам то, что вам нужно:

<li key={item.title}>
  {item.child_items 
    ? <Link 
        activeClassName="active"
        partiallyActive={true}
        aria-haspopup="true" 
        to={item.title === 'home' ? '/' : `/${item.slug}`}
      >
        {item.title}
      </Link>

    : <Link to={`/${item.slug}`}>{item.title}</Link>
  }
</li>

---

Однако, когда логика c усложняется, это хороший признак того, что вы должны переместить что-то в его собственный компонент где проще написать столько кода, сколько вам нужно, чтобы что-то заработало.

function NavLink({item}) {
  const toHref = item.title === 'home' ? '/' : `/${item.slug}`

  if (item.child_items) {
    // Link with children
    return <li>
      <Link 
        activeClassName="active"
        partiallyActive={true}
        aria-haspopup="true" 
        to={toHref}
      >
        {item.title}
      </Link>
    <li>
  } else {
    // Link with no children
    return <li><Link to={toHref}>{item.title}</Link></li>
  }  
}

Теперь вы можете просто:

<NavLink item={item} key={item.title} />

И вы знаете, что это будет правильно вещь.