Реагировать фрагменты ломать укладку

Question

Привет, я использую Ant Design (не уверен, что это как-то связано с этим странным поведением) и React Router в этом примере.

Использование следующего примера полностью нарушает стилизацию приложения:

    {adminVisible && (
      <>
        <Item key={Routes.USER}>
          <Link to={Routes.USER}>Nový uživatel</Link>
        </Item>
        <Item key={Routes.CAR}>
          <Link to={Routes.CAR}>Nové vozidlo</Link>
        </Item>
        <Item key={Routes.REASON}>
          <Link to={Routes.REASON}>Nové účel jízdy</Link>
        </Item>
        <Item key={Routes.DESTINATION}>
          <Link to={Routes.DESTINATION}>Nová destinace</Link>
        </Item>
      </>
    )}

Но с использованием следующего отлично работает:

    {adminVisible && (
      <Item key={Routes.USER}>
        <Link to={Routes.USER}>Nový uživatel</Link>
      </Item>
    )}
    {adminVisible && (
      <Item key={Routes.CAR}>
        <Link to={Routes.CAR}>Nové vozidlo</Link>
      </Item>
    )}
    {adminVisible && (
      <Item key={Routes.REASON}>
        <Link to={Routes.REASON}>Nové účel jízdy</Link>
      </Item>
    )}
    {adminVisible && (
      <Item key={Routes.DESTINATION}>
        <Link to={Routes.DESTINATION}>Nová destinace</Link>
      </Item>
    )}

Первый пример намного чище, и я хотел бы использовать его, но он не работает, в то время как второй подход не так хорош, но работает.

Может кто-нибудь объяснить мне, почему это происходит?

Спасибо.

Answer 1

<Fragment /> На самом деле не добавляет узел DOM, только виртуальный контейнер DOM.К сожалению, компоненты контейнера в инфраструктуре пользовательского интерфейса имеют дело с массивами дочерних компонентов, как в <StyledMenu />, поэтому фрагмент будет влиять на работу этого компонента.Он работает с непосредственным потомком, который в данном случае является фрагментом, а не li, поэтому он применяет к нему классы, а затем его удаляют из dom, потому что он является фрагментом.

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