您的位置:首页 > 编程学习 > > 正文

react判断数据格式(详解Ref在React中的交叉用法)

更多 时间:2022-01-14 02:29:09 类别:编程学习 浏览量:2421

react判断数据格式

详解Ref在React中的交叉用法

一、首先说明下什么是Ref

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

Ref官网说明:点击这里

二、ref在hooks中的用法

1、ref在hooks中HTMLDom的用法

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

  • const Fn = ()=>{
        const testRef = useRef(null);
        console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<li>测试</li>
        return (
            <li ref={testRef}>测试</li>
        )
    }
    
    
  • 2、ref在hooks中与函数式组件的用法

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

  • const Fn = ()=>{
        const testRef = useRef(null);
        // 定义Test函数组件
        const Test = ({ refs }) => <li ref={refs}>我是ReactDOM test</li>;
        console.log('testRef',testRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是ReactDOM test</li>
        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 (
                <li >
                    我是TestClass类组件 测试
                </li>
              )
            }
        }
        console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是TestClass类组件 测试</li>
        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 (
                <li >
                    我是TestClass类组件 测试
                </li>
              )
            }
        }
        //定义TestClass的connect包裹后的组件
        //forwardRef:true 设置redux允许将ref作为props传入到connect包裹的组件中
        const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
        
        console.log('testClassRef',testClassRef.current); // 会渲染两次,第一次打印null,第二次是<li>我是TestClass类组件 测试</li>
        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
    您可能感兴趣