企业微信群聊消息优化版---三层嵌套（数组加对象）

最新推荐文章于 2026-06-30 10:33:18 发布

原创

最新推荐文章于 2026-06-30 10:33:18 发布 · 423 阅读

本文介绍企业微信群聊消息管理的优化版，重点讨论如何实现三层嵌套的页面展示，包括第二层和第三层的具体内容，旨在提升用户体验。

会话管理 - 群聊消息优化版


/**
 * @文件描述  会话管理界面右侧 ---- 群聊  二级页面
 * @创建人和时间 闫宵娜 - 2021-04-21
 * @更新人和时间 闫宵娜 - 2021-05-6
 * @param {Array} modalBox - 包装modul的开关按钮和父页面获取的item数据
 *  @param {Array} visible - 控制modul的打开关闭
 *  @param {Array} data - 获取父页面传过来的item数据
 * @param {object} videos - 传给子组件使用
 * @param {boolean} disabled - 传给子组件使用，控制投票消息类型禁选
 * @param {Function} renderConI - 封装类型的函数
 * 
*/
import React, {
   
    PureComponent } from 'react';
import {
   
    Row, Col, Card, Modal } from 'antd';
import {
   
    renderConI } from './renderCon.js';

export default class Chatrecord extends PureComponent {
   
   
  constructor(props) {
   
   
    super(props);
    this.state = {
   
   
      modalBox: {
   
    visible: false, data: {
   
   } },
      // eslint-disable-next-line react/no-unused-state
      videos: {
   
   },
      // eslint-disable-next-line react/no-unused-state
      disabled: true,
      // 测试二级页面
      modalBoxTwo: {
   
    visibleTwo: false, data: {
   
   } },
      modalBoxThree: {
   
    visibleTwo: false, data: {
   
   } },

    }
  };

  // 点击打开二级页面
  handleModalVisible = (flag = false, item = {
    
    }) => {
   
   
    this.setState({
   
   
      modalBox: {
   
    visible: flag, data: item },
    })
  }

  // 遍历i获取层级内容
  handleNextValue = (values) => {
   
   
    const {
   
    modalBox } = this.state;
    this.setState({
   
   
      modalBox: {
   
    ...modalBox, data: {
   
    ...values } },
    })
  }

  // 二级页面
  handleModalVisibleTwo = (flag = false, item = {
    
    }) => {
   
   
    this.setState({
   
   
      modalBoxTwo: {
   
    visibleTwo: flag, data: item },