下面是一个使用Ant Design的折叠面板组件,并且初始状态是全部展开的示例代码:
import React, { useState } from "react";
import { Collapse } from "antd";
const { Panel } = Collapse;
const App = () => {
const [activeKeys, setActiveKeys] = useState(["1", "2", "3"]);
const handlePanelChange = (keys) => {
setActiveKeys(keys);
};
return (
内容1
内容2
内容3
);
};
export default App;
在这个示例中,我们使用了useState钩子来创建一个activeKeys状态,用于保存当前展开的面板。初始状态下,我们将activeKeys设置为["1", "2", "3"],即面板1、面板2和面板3都是展开的。
然后,我们在Collapse组件上使用activeKey属性将activeKeys状态传递给折叠面板组件。当面板的展开状态发生变化时,onChange事件将被触发,并将新的展开面板的keys传递给handlePanelChange函数。在handlePanelChange函数中,我们将接收到的新的展开面板的keys更新到activeKeys状态中。
这样,当用户手动展开/折叠面板时,activeKeys状态将被更新,从而实现了动态展开/折叠面板的效果。