React-Native refs引用遇到的一个问题

页面覆盖与引用冲突
最新推荐文章于 2022-04-13 19:54:04 发布
原创 最新推荐文章于 2022-04-13 19:54:04 发布 · 350 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

探讨了一个大页面下两个小页面相互覆盖，使用refs引用导致其中一个页面操作失效的问题。通过创建新页面来规避原有问题，提供了临时解决方案。
部署运行你感兴趣的模型镜像

场景

一个大页面S下两个小页面A,B相互覆盖，过程中使用refs引用了小页面C，有关闭和打开动作

 

问题

在A页面关闭了C，会导致在B页面无法打开页面，没有报错，需要分析问题

 

解决方法

时间有限，催的急，没有慢慢分析具体问题（事实上也没有分析的工具和办法，就是盲猜是这样导致的）我用的是比较蠢的，将C页面的内容，完全复制到一个新页面D中，是A操作C，B操作D

您可能感兴趣的与本文相关的镜像

Langchain-Chatchat

Langchain-Chatchat

AI应用
Langchain

Langchain-Chatchat 是一个基于 ChatGLM 等大语言模型和 Langchain 应用框架实现的开源项目，旨在构建一个可以离线部署的本地知识库问答系统。它通过检索增强生成 (RAG) 的方法，让用户能够以自然语言与本地文件、数据库或搜索引擎进行交互，并支持多种大模型和向量数据库的集成，以及提供 WebUI 和 API 服务

react-native react-native-modal-dropdown级联扩展
guduyishuai的博客
01-22 4014
react-native没有提供select控件，这里使用第三方控件react-native-modal-dropdown，但是在做级联的时候发现存在问题。在源码基础上做了一些修改。  react-native-modal-dropdown版本为0.6.0 级联出现异常现象的原因为，defaultValue和buttonText的配合没有加入级联的逻辑，导致无法级联显示不正常 新增but
React native中react-native-scrollable-tab-view组件中的页面高度问题
StevenTQP的博客
09-21 3227
近期的react native bug 最近在学习React native ，期间用到了react-native-scrollable-tab-view组件，他的ScrollableTabView很好用，但是我需要在其中的切换的页面高度是不确定的，两者不一定等高，所以产生了一个问题。 因为我的这个大的页面最外层是包裹了一层Scrollview的导致ScrollableTabView中的两个切换...
Airbnb 宣布弃用 React Native！
滴水穿石，点石为金
06-20 678
作为 React Native 框架的先行者和倡导者，Airbnb 公司今日发布通告，决定放弃使用 React Native 技术，重新投入资源和精力到原生开发当中。这其中发生了什么，且...
react中ref已废弃，请使用React.createRef()
lvfeifeiCSND的博客
05-28 2455
在项目开发过程中难免会从操作dom，在react中获取dom的方式 (1)ref(已废弃) //绑定ref <input ref="getInput"/> //获取dom元素的值 console.log(this.refs.getInput.state.value) (2)React.createRef()（推荐使用） export default class Header extends Component { constructor(props){ super(props)
React Native 的props，state，refs使用详解
huangjianfeng21的博客
07-11 973
props的详情解释 props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递） 我个人理解,该属性的值是在父组件中引用子组件时候指定的,该属性是子组件中定义的,比如新建一个苹果组件,苹果有颜色的属性,在构建这个组件的时候,指定一个color属性,在父组件使用的时候再指定一个具体的颜色值,那么最后子组件就会拿到这个值,显示相应颜色的苹果. 如何使用p...
React refs
qq_43539854的博客
04-13 410
refs refs：提供了一种方式，是我们可以访问DOM节点或在render方法中创建React元素。 以下几种情况适用于refs： 管理焦点，例如文本框或媒体播放 触发强制动画 集成第三方DOM库 在官方文档中，React提醒我们不要过度使用refs。 回调形式的refs 在React16.3之前，都是使用回调函数的方式使用refs。 这个回调函数接收React组件实例或DOM元素作为参数，以使他们能在其他地方被存储和访问。 下面是一个关于refs使用回调函数获取输入框焦点的例子： import Re
react-native Refs 调用方法 的使用方式
Wangdanting123的博客
04-01 1725
import React, { PureComponent } from "react"; import { TouchableOpacity, View, Text, TextInput } from "react-native"; export default class Demo extends PureComponent { constructor(props) { sup...
摄像机视图react-native-camera.zip
07-18
react-native-camera 是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。 使用示例： var React = require('react-native'); var { AppRegistry, ...
【React Native】react-native之集成支付宝支付、微信支付
Landen2011的博客
06-11 628
一、在使用支付宝支付、微信支付之前导入桥接好的头文件 　　github地址：https://github.com/xujianfu/react-native-pay 二、集成支付宝支付流程 　　RN支付宝需要分别对iOS(Xcode)和安卓(AS)配置，与原生app相比只是将支付操作放在了RN当中。 　　流程大同小异，一般都是从后台获取支付字符串，然后传递支付字符串调用支付宝SDK，SDK再调用...
react-native-2-side-menus:2个侧面菜单
04-30
创建一个主要组件并传递您的左右组件 class Example1 extends Component { constructor ( props ) { super ( props ) ; } componentDidMount ( ) { this . refs . menu . moreLifeCycles ( this . refs . ...
RN refs使用
小炫风技术旅行
10-13 1208
refs 是什么呢?简单理解为组件的id标示,可以在其他地方找到这个这个组件,类似Android view的id 实际例子:   import React, {Component} from 'react'; import {Image, Platform, StyleSheet, Text, View} from 'react-native'; export default class ...
react中的refs属性的使用方法
冰雪为融的博客
05-16 5594
        在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。        虚拟DOM是React的一大亮点，具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。但是...
《React-Native系列》17、 RN中this所引起的undefined is not an object错误
等待就是浪费青春
08-15 2万+
在我们编写RN代码的时候经常会出现一个错误，undefined is not an object(evaluating 'this.refs' ). undefined is not an object错误，提示我们未知的对象，该句话的含义就是我们没有定义该对象。但是this就是当前对象，为什么还会出现如此问题？只有一种可能，就是当前引用的this和this.setState的this不是指向同
7、React中的refs的使用
热门推荐
大前端程序猿
01-21 3万+
ref是React中的一种属性，当render函数返回某个组件的实例时，可以给render中的某个虚拟DOM节点添加一个ref属性，如下面的代码所示： var App = React.createClass({ render: function() { return ( ); } }); React.render
React Native echart this.refs为空
qq_41827018的博客
04-17 584
componentWillMount(){ this.init() } init=async()=>{ await this.config() } config=()=>{ console.log(this) console.log(this.refs) //一些对option的操作 ... ...
React组件refs详解
ABang的博客
06-26 1万+
ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。 其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的： 在从 r
React中如何使用refs
沈斯明技术博客
12-08 3653
ref是React中的一种属性，当render函数返回某个组件的实例时，可以给render中的某个虚拟DOM节点添加一个ref属性，如下面的代码所示： [html] view plain copy  print? body>       script type="text/jsx">           var App = React.crea
正确使用react的refs/props/state及其它
大灰狼的小绵羊哥哥的博客
03-26 3077
正确使用refs 很多人写refs是这么写的（代码仅作演示）http://www.jianshu.com/p/193c34e5eeeb let Progress = React.createClass({ show: function(){ this.refs.modal.show(); }, render: function() {
React-Native 常见错误及其原因
Que_Li的博客
09-01 6317
1.invariant violation:expected a component class,got[object object]        创建自定义组件首字母要大写，否则会报错.     2.Module 0 is not a registered callable module.        将gradle升级成最新版本(cd android 进入android目
react-native-form：简化表单字段管理的React Native组件
react-native-form 是一个专为 React Native 应用程序设计的轻量级表单管理组件，其核心目标是简化表单字段的值获取过程，避免在多个输入控件上重复绑定 onChange 或 onTextChange 事件监听器。通过将表单字段统一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值