详解Ref在React中的交叉用法

目录
  • 一、首先说明下什么是Ref
  • 二、ref在hooks中的用法
    • 1、ref在hooks中HTMLDom的用法
    • 2、ref在hooks中与函数式组件的用法
    • 3、ref在hooks中与类组件一同使用
    • 4、ref在hooks中与class、react-redux一同使用

一、首先说明下什么是Ref

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说,这通常不是必需的。但其对某些组件,尤其是可重用的组件库是很有用的

Ref官网说明:点击这里

二、ref在hooks中的用法

1、ref在hooks中HTMLDom的用法

这里就如官网一样正常使用即可,官网例子:这里

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<div>测试</div>
    return (
        <div ref={testRef}>测试</div>
    )
}

2、ref在hooks中与函数式组件的用法

这里只需要将ref属性透传到函数式组件中即可

const Fn = ()=>{
    const testRef = useRef(null);
    // 定义Test函数组件
    const Test = ({ refs }) => <div ref={refs}>我是ReactDOM test</div>;
    console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<div>我是ReactDOM test</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */}
         <Test refs={testRef} />
    )
}

3、ref在hooks中与类组件一同使用

这里仅需要在类组件的回调ref中手动赋值给useRef对象即可,更多回调ref:这里

import ReactDom from 'react-dom';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定义TestClass类组件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass类组件 测试
            </div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<div>我是TestClass类组件 测试</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */}
         <TestClass
             ref={el => {
                console.log('new render refs')
                testClassRef.current = ReactDom.findDOMNode(el);
             }}
         />
    )
}

4、ref在hooks中与class、react-redux一同使用

当遇到connect包裹的类组件时,因为最外层已经被包裹成了react-redux的Provider,所以需要将ref属性透传如真正React组件中,这个时候需要关注下connect的forwardRef属性

import ReactDom from 'react-dom';
import { connect } from 'react-redux';

const Fn = ()=>{
    const testClassRef = useRef(null);
    // 定义TestClass类组件
    class TestClass extends React.Component {
        render() {
          return (
            <div >
                我是TestClass类组件 测试
            </div>
          )
        }
    }
    //定义TestClass的connect包裹后的组件
    //forwardRef:true 设置redux允许将ref作为props传入到connect包裹的组件中
    const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);

    console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<div>我是TestClass类组件 测试</div>
    return (
        {/* 这里之所以用refs而不用ref作为prop是因为ref会被react特殊处理,不会作为props透传到react组件中,类似于key */}
         <TestClassConnect
            ref={el => {
              console.log('new render refs')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}

以上就是详解Ref在React中的交叉用法的详细内容,更多关于Ref在React中的交叉用法的资料请关注我们其它相关文章!

(0)

相关推荐

  • React中Ref 的使用方法详解

    本文实例讲述了React中Ref 的使用方法.分享给大家供大家参考,具体如下: React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需要在典型数据流之外强制修改子项.要修改的子项可以是React组件的实例,也可以是DOM元素.对于这两种情况,React都提供了api. 何时使用refs refs有一些很好的用例: 1.文本选择或媒体播放. 2.触发势在

  • React forwardRef的使用方法及注意点

    之前使用react.forwardRef始终无法应用于react高阶组件中,最近终于捣鼓出来了,于是记录下来.关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件. React.forwardRef使用示例 下面就是应用到React组件的错误示例: const A=React.forwardRef((props,ref)=><B {...props} ref={ref}/>) 这就是我之前经常犯的错误, 这里的ref是无法生效的. 前面提到re

  • 学习React中ref的两个demo示例

    为了摆脱繁琐的Dom操作, React提倡组件化, 组件内部用数据来驱动视图的方式,来实现各种复杂的业务逻辑 ,然而,当我们为原始Dom绑定事件的时候, 还需要通过组件获取原始的Dom, 而React也提供了ref为我们解决这个问题. 为什么不能从组件直接获取Dom? 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它插入文档以后,才会变成真实的 DOM 如果需要从组件获取真实 DOM 的节点,就要用到官方提供的ref属性 使

  • 如何深入理解React的ref 属性

    概述 首先,Refs 和 ref 是两个概念,Refs 是 React 提供的可用特定 API 创建的一个对象.该对象的结构如下: 这个对象只有一个属性就是 current ,那么这个对象是用来干嘛的呢? Refs 允许我们访问 DOM 节点或在 render 方法中创建的 React 元素.(DOM节点就是指原生DOM元素,在render()方法中创建的 React 元素就是指 React 的类组件元素) 我们可以想象这样一个需求,两个兄弟元素,一个是 div ,一个是 button.现在想实

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • 详解react-refetch的使用小例子

    使用react-refetch来简化api获取数据的代码 const List = ({data: gists}) => { return ( <ul> {gists.map(gist => ( <li key={gist.id}>{gist.description}</li> ))} </ul> ) } const withData = url => Part => { return class extends Component

  • React组件refs的使用详解

    ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识.作为组件的属性,其属性值可以是一个字符串也可以是一个函数. 其实,ref的使用不是必须的.即使是在其适用的场景中也不是非用不可的,因为使用ref实现的功能同样可以转化成其他的方法来实现.但是,既然ref有其适用的场景,那也就是说ref自有其优势.关于这一点和ref的适用场景,官方文档中是这样说的: 在从 render 方法中返回 UI 结构之后,你可能想冲出 React 虚拟 DOM 的限制,在 render 返回的

  • React Native中的RefreshContorl下拉刷新使用

    我们知道App中都有下拉加载,在React Native中也有类似的控件 一.属性方法 (1) onRefresh function 在视图开始刷新的时候调用 (2) refreshing bool 视图是否在刷新时显示指示器,也表明当前是否在刷新中 (3) colors [ColorPropType] android平台适用 进行设置加载进去指示器的颜色,至少设置一种,最多可以设置4种 (4) enabled bool android平台适用 用来设置下拉刷新功能是否可用 (5) progre

  • React中的refs的使用教程

    ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示: <body> <script type="text/jsx"> var App = React.createClass({ render: function() { return ( <div> <input type="text" placeholder="inp

  • React ref的使用示例

    写了一段时间的 react,99%都在写 state.prop.useState.useEffect,对 ref 特别不熟悉,前几天做一个需求,想用 ref 实现父组件捞子组件的某个状态值,结果失败了,特此整理一下 ref 相关内容. 什么是 ref 官网介绍: 在典型的 React 数据流中,props 是父组件与子组件交互的唯一方式.要修改一个子组件,你需要使用新的 props 来重新渲染它.但是,在某些情况下,你需要在典型数据流之外强制修改子组件.被修改的子组件可能是一个 React 组件

  • React中useRef的具体使用

    相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象. 而useRef这个hooks函数,除了传统的用法之外,它还可以"跨渲染周期"保存数据. 首先来看一下它传统的用法: import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function App(props){ const [count, setCount] = useState(

  • vue3组合API中setup、 ref、reactive的使用大全

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变量的变化哈!我们将会利用它 ref 在vue中内置,需要导入. <template> <div>{{ countNum}}</div> <button @click="handerFunc">按钮</button> </te

随机推荐