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

码小白的求学之路

于 2021-06-02 15:55:06 发布

阅读量336

点赞数

分类专栏： js算法文章标签： react

本文链接：https://blog.youkuaiyun.com/yanxiaona111/article/details/117470198

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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


/**
 * @文件描述  会话管理界面右侧 ---- 群聊  二级页面
 * @创建人和时间 闫宵娜 - 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 },