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

最新推荐文章于 2021-02-19 14:37:00 发布
最新推荐文章于 2021-02-19 14:37:00 发布
阅读量286 收藏
点赞数
分类专栏： 错误记载 react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34823218/article/details/106951431
版权

场景

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

 

问题

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

 

解决方法

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

大白熊_BlankBear
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
摄像机视图react-native-camera.zip
07-18
react-native-camera 是 React Native 的摄像头 viewport。这个模块应用于开发的早期阶段，它支持摄像头的转换和基本图片捕捉。 使用示例： var React = require('react-native'); var { AppRegistry, ...
react中ref已废弃，请使用React.createRef()
lvfeifeiCSND的博客
05-28 2259
在项目开发过程中难免会从操作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 Refs 调用方法 的使用方式
Wangdanting123的博客
04-01 1640
import React, { PureComponent } from "react"; import { TouchableOpacity, View, Text, TextInput } from "react-native"; export default class Demo extends PureComponent { constructor(props) { sup...
React Native 的props，state，refs使用详解
huangjianfeng21的博客
07-11 842
props的详情解释 props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常由父层组件向子层组件传递） 我个人理解,该属性的值是在父组件中引用子组件时候指定的,该属性是子组件中定义的,比如新建一个苹果组件,苹果有颜色的属性,在构建这个组件的时候,指定一个color属性,在父组件使用的时候再指定一个具体的颜色值,那么最后子组件就会拿到这个值,显示相应颜色的苹果. 如何使用p...
《React-Native系列》17、 RN中this所引起的undefined is not an object错误
大灰狼的小绵羊哥哥的博客
12-18 1万+
在我们编写RN代码的时候经常会出现一个错误，undefined is not an object(evaluating 'this.refs' ). undefined is not an object错误，提示我们未知的对象，该句话的含义就是我们没有定义该对象。但是this就是当前对象，为什么还会出现如此问题？只有一种可能，就是当前引用的this和this.setState的this不是指
React Native ref高级用法&&setNativeProps使用
Que_Li的博客
10-20 1万+
ref属性不只是string ref属性不仅接受string类型的参数，而且它还接受一个function作为callback。这一特性让开发者对ref的使用更加灵活。 render() { return <TextInput ref={(c) => this._input = c} />; }, componentDidMount() { this._input.focus
react-native-2-side-menus:2个侧面菜单
04-30
创建一个主要组件并传递您的左右组件 class Example1 extends Component { constructor ( props ) { super ( props ) ; } componentDidMount ( ) { this . refs . menu . moreLifeCycles ( this . refs . ...
react-18.2.0
最新发布
03-17
4. **React.StrictMode**：这是一个用于开发环境的工具，它会在组件树中运行双倍的生命周期方法，帮助开发者提前发现潜在的问题，如副作用的不当使用、即将废弃的方法等。 5. **Error Boundary**：错误边界是React...
react-signature-pad:用于响应的签名板实现
04-30
React签名板用于响应的实现。基本用法var React = require ( 'react' ) ;var SignaturePad = require ( 'react-signature-pad' ) ;React . render ( < SignaturePad xss=removed> , document . body)方法...
react-pull-to-refresh:使用React拉动刷新
05-04
`react-pull-to-refresh`是一个专门为React设计的库，它允许用户通过简单地向下拉动页面来触发数据刷新，通常用于列表或者流式内容的更新。这个库深受启发于原生移动应用中的类似功能，并且提供了简洁的API以便...
ReactNative遇到的坑总结(持续更新)
weixin_34413357的博客
09-15 555
2019独角兽企业重金招聘Python工程师标准>>> ...
React组件refs详解
ABang的博客
06-26 1万+
ref顾名思义我们知道，其实它就可以被看座是一个组件的参考，也可以说是一个标识。作为组件的属性，其属性值可以是一个字符串也可以是一个函数。 其实，ref的使用不是必须的。即使是在其适用的场景中也不是非用不可的，因为使用ref实现的功能同样可以转化成其他的方法来实现。但是，既然ref有其适用的场景，那也就是说ref自有其优势。关于这一点和ref的适用场景，官方文档中是这样说的： 在从 r
7、React中的refs的使用
热门推荐
大前端程序猿
01-21 3万+
ref是React中的一种属性，当render函数返回某个组件的实例时，可以给render中的某个虚拟DOM节点添加一个ref属性，如下面的代码所示： var App = React.createClass({ render: function() { return ( ); } }); React.render
由[eslint] Using this.refs is deprecated. (react/no-string-refs)引发的refs语法更正
vuvivian的博客
11-08 4297
我们习惯于这样使用ref： ①定义 &amp;lt;PanGrid ref=&quot;listPanGrid&quot; dataSource={this.state.listData} configCols={this.state.listColumns} statistics={listStatistics} checkboxCell={true} orderCel...
React中如何使用refs
沈斯明技术博客
12-08 3567
ref是React中的一种属性，当render函数返回某个组件的实例时，可以给render中的某个虚拟DOM节点添加一个ref属性，如下面的代码所示： [html] view plain copy  print? body>       script type="text/jsx">           var App = React.crea
React Native echart this.refs为空
qq_41827018的博客
04-17 506
componentWillMount(){ this.init() } init=async()=>{ await this.config() } config=()=>{ console.log(this) console.log(this.refs) //一些对option的操作 ... ...
ReactNative 的几个小Tips
嘎啦嘎啦
09-10 310
自定义控件内部的Component的刷新时可以这样实现: this.refs.viewInFather.refs.viewInChild.setState(...), 类似于android里的 findViewById 获取到 FatherView, 然后 fatherView.findViewById获取到ChildView; 可以这样理解: Component 就是 android 里面的 ...
React-组件间通信之onRef方法(refs转发)
专栏
02-19 700
组件间通信除了props外还有onRef方法，不过React官方文档建议不要过度依赖ref。本文使用onRef语境为在表单录入时提取公共组件，在提交时分别获取表单信息。 下面demo中点击父组件按钮可以获取子组件全部信息，包括状态和方法，可以看下demo中控制台打印。 // 父组件 class Parent extends React.Component { testRef=(re...
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值