【AntDesign】Modal对话框内子组件重复渲染的问题

最新推荐文章于 2023-10-10 00:45:00 发布
最新推荐文章于 2023-10-10 00:45:00 发布
阅读量369 收藏
点赞数 1
分类专栏： React Ant Design 后台管理系统 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45481971/article/details/131959788
版权

问题

最近写后台管理系统使用到了Modal对话框组件, 其中组件里包含了子组件Upload 用作图片上传, 但是发现了一个问题 – ** 在编辑数据时, 第二次再打开弹窗的话, upload组件会没法回写图片, 但打印出来是有对数据进行传输的**
在这里插入图片描述
在这里插入图片描述

解决

排查发现, 打开Modal时, 里面的Upload组件被调用了两次, 打印了两次fileList 第一次打印出来的fileList有数据, 而第二次fileList为空, 也就调了两次setFileList()的方法, 估计是Modal关闭时未对子元素进行销毁, Modal增加destroyOnClose={true} 就可以啦! 再次打开Modal, 子组件只有调用一次了
在这里插入图片描述

代码x手莓莓
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于原生JS封装的Modal对话框插件的示例代码
10-14
主要介绍了基于原生JS封装的Modal对话框插件的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序使用modal组件弹出对话框功能示例
08-28
主要介绍了微信小程序使用modal组件弹出对话框功能,结合实例形式分析了微信小程序model组件相关属性及事件响应操作技巧,需要的朋友可以参考下
react-st-modal：用于React JS的简单灵活的模式对话框组件
02-04
React St Modal是一个简单而灵活的库，用于实现模式对话框。 产品特点 简单易用的API 与移动设备兼容 已实施的标准交互功能：警报，确认，提示 异步/等待语法 通过CSS变量自定义 辅助功能和焦点控制 动态调用模式对话框，不需要在代码中定义 没有第三方图书馆 演示和文档： ://nodlik.github.io/react-st-modal/ 入门 安装 您可以使用npm安装最新版本： npm install react-st-modal 总览 为了实现模式对话框的功能，该库具有四个功能和一个React组件。 功能Alert ， Confirm ， Prompt实施现有浏览
ant-design-draggable-modal:Ant Design的Modal，可拖动
05-02
蚂蚁设计可拖动模态 Ant Design的模态，可拖动。 :globe_showing_Americas: :sparkles: 特征 用标题栏拖动。 调整大小与句柄。 保持界限。 在拖动过程中。 调整大小期间。 在调整窗口大小期间。 具有托管zIndex多个模态。 从中心打开。 用作受控组件的更好的API。 从象限打开。 更好的转义密钥管理。 使用选项键调整大小。 :package: 安装 yarn add ant-design-draggable-modal 注意：您必须使用react@16.8.0和react-dom@16.8.0或更高版本。 :hammer: 用法 import React , { useState , useCallback } from 'react' import { Button } from 'antd' import { DraggableModal , DraggableModalProvider } from
antd 两个modal弹窗，一个基于另一个位置固定
daxi玫瑰的博客
06-02 836
antd 两个modal弹窗，一个基于另一个位置固定
antd modal组件多次渲染的临时解决办法
weixin_43557605的博客
06-07 2018
解决 antd Modal+Form情况表单多次渲染的问题
antd表单的ProTable组件为可编辑表格时，数据源改变但是表格没重新渲染
最新发布
小蓝人的博客
10-10 700
/去掉dataIndex后只要dataSource变化，则dom就一定会渲染。
使用ant-design-vue的modal，modal封装成一个组件，父组件调用关闭modal之后重新刷新父组件的表格数据怎么办？
丑小鸭变黑天鹅的博客
03-07 2227
使用ant-design-vue的modal，modal封装成一个组件，父组件调用关闭modal之后重新刷新父组件的表格数据怎么办？一、问题描述二、问题解决 一、问题描述 最近实践过程中遇到这样一个问题，我封装了一个modal组件，在父组件中引入并且使用，当打开modal修改完数据点击确定之后，关闭modal，此时发现表格的数据没有重新加载。这样很不合理，明明数据已经更新了，但是并没有立即展示出来。 二、问题解决 最初的想法是，在父组件中把刷新表格的方法，以及当前页，每页显示的条数，传给子组件。然后子组件通
Ant-Design组件中，在Modal 中加入Table组件，为什么Modal 关闭时 ，Table中数据不会更新重新渲染？有什么方法可以让表格中的数据重新渲染？
yqdid的博客
07-24 1169
在Ant Design的Modal组件中，关闭Modal时，Table组件中的数据不会重新渲染的原因是，Modal组件默认是通过隐藏和显示来实现显示和关闭的，而不是通过销毁和重新渲染组件。以上方法中，可以根据具体情况选择适合的方法来让表格中的数据重新渲染。
a-modal 初次未显示时，无法获取到其中包裹的子组件
qq_43060570的博客
06-17 502
bug:主页面加载，未渲染模态框，无法通过this.$refs获取到其包裹的子组件解决方法：forceRender=true使modal强制渲染
modal对话框组件的使用
coising的博客
11-23 1156
modal对话框组件的使用
Antd 销毁组件，使defaultValue重新生效
weixin_44240581的博客
03-20 1534
前言 页面我用一个Modal组件包一个Form组件，由于页面较复杂，所以采用混合布局，一部分用Form.Item包裹组件（受控），一部分直接用原始组件（不受控） 受 控 组 件 ：手动改变，页面动态更新，form.getFieldsValue() 能取到最新值 不受控组件： 设置defaultValue时，手动改变，页面动态更新，onChange能取到输入的值，外部数据也更新 【√】 设置value时，手动改变，页面不能更新，onChange能取到输入的值，外部数据也更新【×】 新建操作：不受控组件用d
vue重新渲染插槽内容
qq_16570607的博客
08-12 2078
当前页面 A.vue <template> <div> <a @click="funA()">点击</a> <B ref="componentB"></B> </div> </template> <script> import B from "./B.vue"; //引入组件...
弹出框Modal子组件，调用父组件方法关闭
草叶儿的博客
02-03 1436
本人使用.sync修饰符， // this.$emit('update:visible-a',false); //无效 this.$emit('update:visibleA',false); //有效 <modal:visible-a.sync="bool"></modal> 示例 visibleChange(val) { if (!val) { this.close(); } else {
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
agua001的博客
04-20 2810
vue3 把antd 的Modal组件作为子组件时，本地运行是没问题的，打包后 cancel关闭事件触发无效
vue项目中创建modal弹窗组件（父子组件传递）
qq_44880532的博客
04-26 1701
带着项目来复习一下vuecli父子组件传递 首先modal组件是每个页面创建所必须的 具体展现形式如下 这就需要我们定义一个子组件信息,在每个页面时需要引用modal组件来自定义文本信息 这是我在modal组件中写入的信息,以上信息要提供给父组件自定义编辑（类似父子组件协商定义的接口） html中自行编辑 <div class="modal" v-show="showModal"> <div class="mask"></div> <di
vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
heshan1992的博客
08-18 2655
在Vue中组件实例之间的作用域是孤立的，以为不能直接在子组件上引用父组件的数据，同时父组件也不能直接使用子组件的数据 一、父组件利用props往子组件传输数据 父组件： //注意传递参数时要用—代替驼峰命名，HTML不区分大小写 子组件： Vue.component('child', { // camelCase in JavaScript props:{myMessage}
前端采坑：使用iview的Modal组件中包含子组件，子组件加载出现问题
weixin_47319740的博客
09-09 934
场景：近期在项目中遇到使用iview的Modal组件中再引入其他组件，那个组件内容加载出现问题 代码如下图： 页面显示如下图： 修改如下： 显示如下图：
ant-design组件modal对话框两条横线去除
05-12
要去除Ant Design Modal对话框的两条横线，可以使用以下CSS代码： ``` .ant-modal-header { border-bottom: none; } ``` 这将在样式中将Ant Design Modal的头部边框设置为无，从而去除两条横线。将此CSS添加到您的样式表中即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值