react如何卸载组件_React-Navite-动态添加删除组件

最新推荐文章于 2024-05-27 21:21:32 发布
最新推荐文章于 2024-05-27 21:21:32 发布
阅读量254 收藏
点赞数
文章标签： react如何卸载组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39678426/article/details/111487300
版权
博主使用RN开发动态添加删除组件的页面遇难题。先提出将组件封装放state数组，点击添加或删除组件的思路，但未成功。后提出state声明数组，添加组件ID，让组件内部数据与ID对应，在外部操作组件内部值的思路，避免了缓存问题。

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

最近新找了工作，使用RN开发新项目，学了10天的RN就分给我了一个很难很难的页面，动态添加删除组件的页面，啊......就这个破东西搞了2天了还是有bug，怎么都想不明白，静态的还懵懵的别说动态的组件了......唉厚着脸皮做吧......

第一版思路：既然是动态的，肯定要用到state，这是必须的啦，大致的思路就是把组件封装起来，放到state的数组中，然后点击➕，在state的数组里面push一个组件，点击➖，在state的数组删除对应的组件就可以啦

呵呵呵，你以为这样就可以了?!要是这么容易我能纠结两天毫无进展？！

shit！！！Bullshit！！！

这样根本就不能实现我的页面，虽然大致思路是对的，但是还是错的！！！

OK，心平气和的在想想吧

第二版思路：既然是动态的，肯定要用到state，这是必须的啦，大致思路就是state声明一个数组，创建组件肯定需要一个唯一的标识啦，所以在数组中要添加组件的ID，数组中有多少个ID ，就对应的创建多少个组件，还有一点非常的重要，就是组件内部的数据要和组件一一对应起来，就是和组件的ID 一一对应起来(如果数据在组件内部操作，当组件销毁时，内部的值还是存在的，貌似组件对内部的值会有缓存，这就是我2天的坑位，大家不要和我抢)，所以，组件内部的值都要在外部操作，内部需要什么值，就在state的数组中定义，传过去，然后在组件内部的改变方法中在把值回传回去，改变state的值自然会更新组件内部的值，这样操作起来虽然麻烦，但是内部的值和组件一一对应，避免了好多的坑。

上几张代码图

在父组件中

6D3D37F3-21F0-498B-B297-E97799554C41.png

2A7F586F-7D8A-4F35-BE06-B78577E83FFF.png

在子组件中

A9C6EADB-AED6-4191-8E2B-EA4C2986204E.png

5F7C1BEC-F0A8-4247-9588-8C7BD18F4886.png

回到父组件中操作

22331757-ABC8-47BF-9B77-FDA36873EA8F.png

461BB4E6-9EE7-4CD2-AAC8-D1575AC7A255.png

再上张gif

QQ20170413-184909.gif

react-native第三方组件之react-native-splash-screen报错解决
weixin_43762903的博客
12-01 1140
引言：在10月-11月这一个月的时间，本人用React做了一个电商的项目。通过该项目，本人对React的理解有更进了一步。目前，该项目已经基本完成，于是又想起了之前被我暂且搁置的react-native项目。近日，重新拾起该react-native项目。遇到的第一个问题就是第三方组件的引入，第一个组件便是react-native-splash-screen。在引入该组件的过程中遇到了非常多的问题...
react封装函数_react request.js 函数封装
weixin_39829166的博客
12-19 476
1.request.js 函数封装import { Toast } from 'antd-mobile';import axios from 'axios';import store from '../store';import { push } from 'react-router-redux';import qs from 'qs';// 请求路径const BaseUrl = 'https...
react-panel:用 React 编写的面板组件
06-26
React面板 用 React 编写的 Panel 组件。 或查看 index.html 以了解用法。 发展 npm install -g live-server 安装 破解 如何使用 var Panel = require ( "react-panel" ) ; var panel1 = Panel . render ( { contentStr : document . getElementById ( "content1" ) . innerHTML , title : "Panel Demo 1" } , "panel1" ) ; var panel2 = Panel . render ( { contentStr : document . getElementById ( "content2" ) . innerHTML , title :
Vue动态组件
码小余の博客
11-01 2102
Vue动态组件 通过组件的学习我们已经了解了组件的基本使用，但是我们以前使用的组件都是静态的，也就是说它是固定名字的那一个组件，今天我学习到了动态组件，它可以动态的更改自己的组件名，感觉很方便~ 我们可以在组件中通过 :is 来实现动态组件 具体代码如下 <div id="app"> <div id="content"> <component :is="com"></component> </div>
vue中使用递归组件创建导航菜单
04-29 949
概念 组件在它的模板内可以递归的调用自己，只要给组件设置name就可以了 用法 设置name后，在组件模板内就可以递归使用了，不过需要注意的是，必须给一个条件来限制递归数量，否则会抛出错误：max stack size exceeded 父组件 在父组件中定义一个要递归的数据（list数组），通过props传递给子组件 const vm = new Vue({ el: '#app', data: { msg: '我是来自父组件数据', list:
vue data数据修改_VUE学习笔记——导航菜单制作
weixin_39822629的博客
11-20 315
导航菜单存储sessionStorage允许在浏览器中以KEY:VALUE形式存储响应数据，当前页面关闭后sessionStorage中存储的数据被清除。sessionStorage.setItem(key,value);//在sessionStorage中存储数据sessionStorage.getItem(key);//从sessionStorage中读取数据localStorage...
Vue父组件使用v-for循环子组件ref使用问题
YKX_优快云的博客
12-01 1137
基于 形式编程方式，父组件中循环渲染子组件成功，但是使用ref获取子组件实例时，获取失败。
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑，路况，室内地图 内置...
React_navite-TodoApp
04-04
8. **生命周期方法**：React组件有一系列生命周期方法，如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`，它们分别在组件挂载、更新和卸载时执行，常用于初始化数据、更新视图和清理资源。...
react-reactcanvas一个高性能canva渲染的React组件
08-15
在React世界中，高效地渲染UI是至关重要的，特别是在处理大量数据或动态更新时。`react-canvas`就是这样一款库，它将React的声明式编程与Canvas的高性能渲染结合在一起，为开发者提供了一种在Canvas上构建复杂UI的...
react-native-ble:用于低功耗蓝牙的 React Native 模块
06-08
React Native BLE 模块是为开发人员提供的一种高效、便捷的工具，用于在React Native应用程序中集成低功耗蓝牙（BLE）功能。这个模块允许应用与支持BLE的硬件设备进行通信，例如健康追踪器、智能家居设备或任何其他...
关于React卸载组件
weixin_52199120的博客
06-02 2299
在React18之前，卸载组件可以用ReactDOM中的unmountComponentAtNode来解决但是删除节点 unmountComponentAtNode()，在React18中被root.unmount()所取代。1.首先在index.js入口文件中，将root暴露出去2.在要卸载组件的文件中，引入root,并调用unmount()方法。
vue+element UI (组件递归) 实现多级导航菜单
qq_44358203的博客
11-10 1027
首先创建一个menus组件： <template> <div> <template v-for="item in childrenList"> <!-- toString（） 将number类型转换为string类型 --> <el-submenu v-if="item.hasOwnProperty('children')&&item.children.length>0" :key="item.i
props传递对象_vue通过props传递对象会报错
weixin_31128057的博客
12-23 386
父组件App.vue子组件sonCp.vue数据结构报错但是数据能渲染上去求解，顺便帮我看一下我取数据方式对么，是放到created这个里面么子组件最初得到的是空字符串，木有.acount.name之类的属性，所以出错。最简单的解决办法：父组件App.vue中的<sonCp :dataObj="dataObj" />改成：<sonCp :dataObj="dataObj" v-i...
antdesign vue 2.0 递归菜单_Vue 和递归组件
weixin_39788451的博客
11-25 1072
有人说递归很难理解，也有人不这么认为。递归函数简单的定义是：一个自调用函数，这意味着它将在执行的某个时刻调用自己。从理论上讲，递归是一种需要两个属性的行为：结束点：停止递归的情况一组规则：负责将所有的操作减少到结束点咱们无法决定哪一个更重要。如果没有结束点，递归将成为一个无限循环，但是如果一组规则就不能实现期望的行为，所以两者都存在才能使它正常工作。递归和 Vue 组件在 Vue 中，递归非常有用...
Vue父组件使用v-for循环不同(或相同)子组件ref使用问题
最新发布
m0_48853274的博客
05-27 936
/但是，在某些情况下，将Vue组件对象转换为响应式对象是不必要的，因为组件本身是Vue的核心概念，已经具有响应式的功能，因此，如果你将一个Vue组件对象转换为响应式对象，将会出现重复观察相同的对象属性的情况，导致不必要的性能开销。//将一个Vue组件对象转换为响应式对象时，可能会导致不必要的性能开销。//为了避免这种情况，Vue建议使用markRaw方法将组件对象标记为非响应式对象，或者使用shallowRef代替ref来创建一个浅响应式对象。//使用markRaw方法将组件对象标记为非响应式对象。
vue element-ui 导航栏动态加载 组件递归方式
Jie0817的博客
10-28 764
Navigation.vue <template> <!--子级菜单--> <el-menu-item v-if="item.children && item.children.length === 0" :index="item.path"> <i :class="item.icon"></i> {{item.title}} </el-menu-item>
图示评审技术_图示评审技术GERT在主机板研发项目中的应用
weixin_39728221的博客
01-14 264
图示评审技术GERT在主机板研发项目中的应用为了提高产品竞争力,扩大市场份额,现代企业越来越重视研发项目投入。IT研发项目所具有的早期高风险性和不确定性,促使进度管理成为项目管理中最重要的因素。而传统的项目管理方法,一般采用甘特图等示意图来进行表示进度,但是这些方法无法处理随机过程,不能经济有效的全面地统筹安排协调进度计划和资源,并考虑各项工序之间相互依存的内在逻辑关系。因此,经济有效的项目管理计...
图示评审技术_图示评审技术中资金的时间价值的费用探析
weixin_28954201的博客
01-30 248
图示评审技术中资金的时间价值的费用探析蔡斌糜莺英(水力发电工程学院)摘要在图示评审技术()网络模型的基础上，考虑资金的时间价值，探析费用参数求解的两种方法：一是利用信号流图理论的方法，二是利用模拟技术的模拟解法并用算例求解，另外，对三峡左岸机组安装施工费用进行了研究关键词图示评审技术网络；资金；时间价值；解析；模拟中图法分类号问题提出图示评审技术(，简称)是网络理论、概率论、模拟技术和信号流图的结...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值