antd collapse默认不展开?

Question

默认不展开

Answer 1

antd的Collapse组件默认是不展开的，需要手动设置默认展开项。

您可以通过将Collapse.Panel的key属性设置为一个唯一的字符串或数字，再将默认展开项的key值设置为对应的字符串或数字来实现默认展开。

例如，如果您的Collapse.Panel有三项，key分别为"1"、"2"、"3"，您想默认展开第一项，那么您可以在Collapse上添加defaultActiveKey属性，值为"1"。

示例代码如下：

import { Collapse } from 'antd';

const { Panel } = Collapse;

function YourComponent() {
  return (
    <Collapse defaultActiveKey={['1']}>
      <Panel header="Panel 1" key="1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Panel>
      <Panel header="Panel 2" key="2">
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </Panel>
      <Panel header="Panel 3" key="3">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </Panel>
    </Collapse>
  );
}

在上面的代码中，我们将defaultActiveKey属性设置为['1']，表示默认展开第一项。如果您想展开多个项，可以将defaultActiveKey属性设置为包含多个key值的数组，如['1', '2']。如果想全部展开，可以将defaultActiveKey属性设置为所有项的key值的数组，如['1', '2', '3']。如果不想默认展开任何一项，则将defaultActiveKey属性设置为一个空数组，如[]。