最近新找了工作,使用RN开发新项目,学了10天的RN就分给我了一个很难很难的页面,动态添加删除组件的页面,啊......就这个破东西搞了2天了还是有bug,怎么都想不明白,静态的还懵懵的别说动态的组件了......唉厚着脸皮做吧......
第一版思路:既然是动态的,肯定要用到state,这是必须的啦,大致的思路就是把组件封装起来,放到state的数组中,然后点击➕,在state的数组里面push一个组件,点击➖,在state的数组删除对应的组件就可以啦
呵呵呵,你以为这样就可以了?!要是这么容易我能纠结两天毫无进展?!
shit!!!Bullshit!!!
这样根本就不能实现我的页面,虽然大致思路是对的,但是还是错的!!!
OK,心平气和的在想想吧
第二版思路:既然是动态的,肯定要用到state,这是必须的啦,大致思路就是state声明一个数组,创建组件肯定需要一个唯一的标识啦,所以在数组中要添加组件的ID,数组中有多少个ID ,就对应的创建多少个组件,还有一点非常的重要,就是组件内部的数据要和组件一一对应起来,就是和组件的ID 一一对应起来(如果数据在组件内部操作,当组件销毁时,内部的值还是存在的,貌似组件对内部的值会有缓存,这就是我2天的坑位,大家不要和我抢),所以,组件内部的值都要在外部操作,内部需要什么值,就在state的数组中定义,传过去,然后在组件内部的改变方法中在把值回传回去,改变state的值自然会更新组件内部的值,这样操作起来虽然麻烦,但是内部的值和组件一一对应,避免了好多的坑。
上几张代码图
在父组件中
在子组件中
回到父组件中操作
再上张gif