Ant Design List嵌套Collapse组件，子项为空时标题显示异常怎么办？

在使用 Ant Design 的 List 组件嵌套 Collapse 组件时，如果 Collapse 的子项为空，可能会导致标题显示异常。这通常是因为 Collapse 组件在没有子项时，默认的样式或行为可能会导致标题显示不正常。

解决方案

1. 检查子项是否为空： 在渲染 Collapse 组件之前，先检查子项是否为空。如果子项为空，可以选择不渲染 Collapse 组件，或者渲染一个占位符。

2. 使用条件渲染： 使用条件渲染来避免渲染空的 Collapse 组件。例如：

   import { List, Collapse } from 'antd';
   
   const { Panel } = Collapse;
   
   const data = [
    {
      title: 'Section 1',
      items: ['Item 1', 'Item 2'],
    },
    {
      title: 'Section 2',
      items: [],
    },
   ];
   
   const MyComponent = () => (
    <List
      dataSource={data}
      renderItem={(section) => (
        <List.Item>
          {section.items.length > 0 ? (
            <Collapse>
              <Panel header={section.title}>
                <List
                  dataSource={section.items}
                  renderItem={(item) => <List.Item>{item}</List.Item>}
                />
              </Panel>
            </Collapse>
          ) : (
            <div>{section.title} (No items)</div>
          )}
        </List.Item>
      )}
    />
   );
   
   export default MyComponent;
   

   在这个例子中，如果 section.items 为空，我们渲染一个简单的 div 来显示标题，而不是渲染 Collapse 组件。

3. 自定义空状态： 如果你希望在 Collapse 组件中显示一个自定义的空状态，可以在 Panel 中添加一个空状态的提示：

   import { List, Collapse, Empty } from 'antd';
   
   const { Panel } = Collapse;
   
   const data = [
    {
      title: 'Section 1',
      items: ['Item 1', 'Item 2'],
    },
    {
      title: 'Section 2',
      items: [],
    },
   ];
   
   const MyComponent = () => (
    <List
      dataSource={data}
      renderItem={(section) => (
        <List.Item>
          <Collapse>
            <Panel header={section.title}>
              {section.items.length > 0 ? (
                <List
                  dataSource={section.items}
                  renderItem={(item) => <List.Item>{item}</List.Item>}
                />
              ) : (
                <Empty description="No items available" />
              )}
            </Panel>
          </Collapse>
        </List.Item>
      )}
    />
   );
   
   export default MyComponent;
   

   在这个例子中，如果 section.items 为空，我们使用 Empty 组件来显示一个空状态的提示。

总结

通过检查子项是否为空并使用条件渲染，可以有效避免 Collapse 组件在子项为空时标题显示异常的问题。你可以根据具体需求选择是否渲染 Collapse 组件，或者在 Collapse 组件中显示一个自定义的空状态提示。