這段時間做react項目遇到一些平常并不會去在意的問題，但解決的時候又需要思考一番。這次開發用到了螞蟻金服的UI框架Ant Design。項目中有一個模塊的樣式和功能用到了折疊面板Collapse組件來實現。但是開發完成后有一個問題被產品提到了。

問題是這樣的，因為我們有一個公告展示的列表，是分頁展示的，當用戶在第某一頁面打開一個或多個面板并且沒有關閉就去點擊其他的頁碼，當他再次返回到當前頁面時折疊面板仍然是展開的。產品的要求是當用戶在某一頁打開折疊面板，從別的頁面再次回來的時候要求折疊面板都關閉。我感覺這個并不影響什么，既然產品提出來了我們就要著手解決他。

翻看了官方文檔提供的API動手實踐了一下發現可以通過activeKey(數字數組/字符串數組)屬性和事件onChange來實現。接下來我們來看看實現的方法(可能還有很多更好的方法，我目前只想到了這一種，有更好實現的大佬希望可以指教，感謝！)。在這個項目中用的react的新特性hooks，而且由于消息分類頁面有好幾個所以是把Collapse抽離出來一個組件，所以涉及到了組件之間的傳值。

抽離的Collapse(子組件)組件：

import React, { useState } from "react";

import { Collapse } from "antd";

import Templatelist from "components/notice/listDom";//這個是面板header內容根據自己項目來定

interface props {//項目用到了ts

dataList: any;//父組件傳過來的消息數據

changeKeys: Function;//父組件傳過來的方法

keys?: Boolean;//父組件傳過來的一個boolean類型的值，用它來控制面板是否折疊，注意：true表示折疊，false表示展開

}

export default function noticeCollapse({ dataList, changeKeys, keys }: props) {

const { Panel } = Collapse;

let [key, setKey] = useState([]);//聲明了一個狀態key用來存儲展開的面板

function handleKeyChange(e) {//實現Collapse自帶的onChange方法

changeKeys(false);//觸發面板的onChange時設置父組件的show為false，即此時activeKey的值為key

setKey(e);存儲當前點開的面板值到key中

}

return (

expandIconPosition="right"

activeKey={keys ? [] : key}//如果keys為true設置面板展開數量為空，即都折疊

onChange={handleKeyChange}

>

{dataList && dataList.length > 0

? dataList.map(item => (

header={}

key={item.messageId}

>

className="contentW"

dangerouslySetInnerHTML={{ __html: item.content }}

>

))

: ""}

);

}

引用Collapse的組件(父組件)

import React, { useEffect, useState } from "react";

import Layout from "components/layout";//項目公共布局組件

import { Noticelist, PaginationBox } from "components/ui/notice";//公共樣式組件

import { Pagination } from "antd";//antd分頁組件

import MangeVoid from "components/manage/manage-void";//若消息為空展示的空頁面組件

import { getMgMsg } from "api/notice";//獲取數據的方法

import NoticeCollapse from "components/notice/collapse";//引入抽離的Collapse組件

function NoticeBaseInfo() {

let [show, setShow] = useState(false);//控制面板的折疊隱藏，需要傳給抽離的Collapse組件

const [allMsg, setmgMsg] = useState({//存放消息數據

total: 0,

list: [],

pageSize: 10,

pageNum: 1

});

let [isvoid, setVoid] = useState(false);//這個作用是為了在異步加載數據時防止空頁面閃一下

let initMsg = pageNum => {

getMgMsg("", pageNum, allMsg.pageSize).then(res => {

if (res.msg == "success" && res.data) {

setmgMsg({ ...res.data, pageNum });

if (!isvoid) {

setVoid(true);

}

}

});

};

useEffect(() => {

initMsg(allMsg.pageNum);

}, []);

function handleChange(page) {//分頁方法

initMsg(page);

setShow(true);//當點擊分頁的時候我們設置show為true，即讓面板都折疊

}

return (

{isvoid && allMsg.list.length == 0 ? (

) : (

dataList={allMsg.list}

keys={show}//把show傳給子組件

changeKeys={(status) => setShow(status)}//接收子組件傳來的值,并賦值給show

>

)}

{allMsg.total > 10 ? (

showSizeChanger={false}

current={allMsg.pageNum}

total={allMsg.total}

hideOnSinglePage={true}

onChange={handleChange}

>

) : (

""

)}

);

}

export default NoticeBaseInfo;

總結

以上是生活随笔為你收集整理的html5中折叠面板,Ant Design中折叠面板Collapse的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。