react+antd实现列表互不影响的展开每条内容

需求:

 

 

 列表可以分别展开自己的内容,互不影响,我选择了手搓……

每一条的展开or关闭状态,与内容展示,存为一个对象,最后合为一个数组,存放在状态里

1
const [content, setContent] = useState([]);

  数据请求拿到数据以后处理一下数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const fetchRecord = async () => {
    setLoading(true);
    const params = { id: urlQuery.id };
    const result = await getOperateRec(params);
 
    if (result.code === 10000) {
        setData(result.data);
        const newText = result.data.map(item => ({
            key: item.operateContent ? 1 : 0,
            value: ''
        }));
        setContent(newText);
    } else {
        message.error(result.msg);
    }
    setLoading(false);
};
 
useEffect(() => {
    fetchRecord();
}, []);

  

 // 0代表-   1代表+
 

dom代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<ul>
                    {data &&
                        data.map((item, index) => (
                            <li key={item.id}>
                                <div>
                                    <p style={{ marginBottom: '14px', display: 'flex' }}>
                                        <span>
                                            {index + 1}、{moment(item.operateTime).format('YYYY-MM-DD HH:mm')},由【
                                            {item.operateEmployeeName}】操作【
                                            {item.operateName}】
                                        </span>
                                        {item.operateContent && (
                                            <i
                                                className={
                                                    getPath(content, `${index}.key`) === 1
                                                        ? 'icon iconfont iconplus-square'
                                                        : 'icon iconfont iconminus-square'
                                                }
                                                style={{
                                                    color: '#FF9E00',
                                                    cursor: 'pointer',
                                                    marginLeft: '4px',
                                                    fontSize: '16px'
                                                }}
                                                onClick={() => {
                                                    keyChild(
                                                        item.operateContent,
                                                        getPath(content, `${index}.key`),
                                                        index
                                                    );
                                                }}
                                            ></i>
                                        )}
                                    </p>
                                    {getPath(content, `${index}.value`)}
                                </div>
                            </li>
                        ))}
                </ul>

  展开与收回的展示控制的方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const keyChild = (text, isOpen, index) => {
    setContent([
        ...content.slice(0, index),
        {
            key: isOpen === 1 ? 0 : 1,
            value:
                isOpen === 1 ? (
                    <div
                        dangerouslySetInnerHTML={{ __html: text }}
                        style={{ marginLeft: '1.5em', marginBottom: '20px' }}
                    ></div>
                ) : (
                    ''
                )
        },
        ...content.slice(index + 1)
    ]);
};

  最终效果:

 

 

代码review时,姐妹提出了一个优化方案,就是把当前展开状态的index存起来为一个数组来控制状态,点击图标的时候,拿当前idnex遍历一下数组就好了,果然比我的方法简单还更优,有空优化一下代码,共勉

 

posted @   芝麻小仙女  阅读(686)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 《HelloGitHub》第 106 期
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
点击右上角即可分享
微信分享提示