AntDesignList中Collapse子项为空时标题显示异常的解决方案

本文针对Ant Design List组件嵌套Collapse组件时，Collapse子项为空导致标题显示异常的问题，提供有效的解决方案。在PC端开发中，当`item.children`为空数组时，由于`showArrow`属性值错误导致显示异常。文章分析了问题根源在于代码逻辑错误，并非Ant Design组件Bug，并通过将`showArrow={item.children.length}`修改为`showArrow={!!item.children.length}`，巧妙地利用逻辑非运算符`!!`解决此问题，确保Collapse标题箭头显示的正确性，避免了等待官方修复的延误。

在Ant Design的List组件中嵌套Collapse组件时，可能会遇到一个显示问题：当Collapse组件的子项为空时，标题显示异常。本文将分析此问题并提供解决方案。

问题：

在PC端网站开发中，使用Ant Design的List组件，并在renderItem函数中返回Collapse组件。当Collapse组件的子项item.children为空数组时，Collapse标题显示错误。

示例代码片段（问题代码）：

<collapse key="{item.id}" title="{item.title}" expandiconposition="end" ghost showarrow="{item.children.length}">
  {item.children.map((child) => (
    <div key="{child.id}" onclick="{()"> {
        handleHelpInfo(child);
      }}
      style={{ cursor: 'pointer', marginBottom: 10, background: token.bgColorPrimary, padding: 4 }}
    >
      {child.title}
    </div>
  ))}
</collapse>

当item.children.length为0时，showArrow属性的值也为0，导致Collapse标题显示异常。

解决方案：

问题并非Ant Design组件本身的bug，而是代码逻辑问题。showArrow属性的值应根据item.children是否存在来决定，而不是直接使用其长度。 只需将showArrow={item.children.length}修改为showArrow={!!item.children.length}。

!!操作符将item.children.length转换为布尔值：当item.children.length为0时，!!item.children.length为false；否则为true。 这样就能正确控制Collapse标题的箭头是否显示。

修改后的代码：

<collapse key="{item.id}" title="{item.title}" expandiconposition="end" ghost showarrow="{!!item.children.length}">
  {item.children.map((child) => (
    <div key="{child.id}" onclick="{()"> {
        handleHelpInfo(child);
      }}
      style={{ cursor: 'pointer', marginBottom: 10, background: token.bgColorPrimary, padding: 4 }}
    >
      {child.title}
    </div>
  ))}
</collapse>

通过简单的代码修改，即可解决此问题，无需等待官方修复。

终于介绍完啦！小伙伴们，这篇关于《AntDesignList中Collapse子项为空时标题显示异常的解决方案》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！