React片段破坏样式

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容器。不幸的是，ui框架中的容器组件像<StyledMenu />中那样处理子组件数组，因此该片段将干扰该组件的工作方式。它对直接子对象（在这种情况下是一个片段而不是li）进行填充，因此它对它应用类，然后由于它是一个片段而被从dom中剥离。

有几种解决方案，但是没有哪一种解决方案比您可以使用的解决方案特别干净，因此我将继续讨论。