ref是什么意思？在hooks中怎样使用？
发布时间：2022-02-22 13:27:07 所属栏目：语言 来源：互联网
导读：这篇文章主要介绍ref在hooks中怎样使用的内容，对新手来说，可能对ref不是很了解，不清楚ref是什么意思，因此下文就给大家来详细的介绍一下ref，感兴趣的朋友可以参考下，希望大家阅读完这篇文章能有所收获，接下来小编带着大家一起了解看看。 一、首先说明
|
这篇文章主要介绍ref在hooks中怎样使用的内容，对新手来说，可能对ref不是很了解，不清楚ref是什么意思，因此下文就给大家来详细的介绍一下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是什么意思及ref在hooks中的用法应该都有所了解了吧，上述示例有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家有帮助，想要了解更多大家可以关注群英网络其它相关文章。 （编辑：衡水站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
