脚本宝典收集整理的这篇文章主要介绍了详解Ref在React中的交叉用法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的
Ref官网说明：点击这里
const Fn = ()=>{
const @R_304_2187@Ref = useRef(null);
console.LOG('testRef',testRef.current); // 会渲染两次，第一次打印null，第二次是<div>测试</div>
return (
<div ref={testRef}>测试</div>
)
}
这里只需要将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} />
)
}
这里仅需要在类组件的回调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); }} /> ) }
当遇到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中的交叉用法的资料请关注脚本宝典其它相关文章！
以上是脚本宝典为你收集整理的详解Ref在React中的交叉用法全部内容，希望文章能够帮你解决详解Ref在React中的交叉用法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。