码云https://gitee.com/skyvilm/react-next.js

1.React.createRef()

作用:获取dom元素

使用

import React,{Component} from 'react'

export default class Index extends  Componen{

  constructor(props){

    super(props)

    this.myref=React.createRef();  //创建节点

  }

  componentDidMount(){

    this.myref.current;  //节点,React.createRef()会返回一个current对象,密闭性的

  }

  render(){

    return <div ref={this.father}>

      this is div

    </div>

  }

}

源码:

import type {RefObject} from 'shared/ReactTypes';//可修改value的 不可变的对象export function createRef(): RefObject {

  //初始化ref对象,属性current初始值为null  const refObject = {

    current: null,

  };

  if (__DEV__) {

    Object.seal(refObject);  //表示密闭性,不可删除属性

  }

  return refObject;

}

2.React.forwardRef()

作用:

React.forwardRef 会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中;

使用:

import React from 'react'//funciton component是没有dom实例的,因为它是PureComponent,所以没有this,// 所以不能通过createRef()来拿到实例//将Father的father传给子组件,并绑定子组件的DOM实例,从而能在父组件拿到子组件的DOM实例const Child=React.forwardRef((props,ref)=>{

  return <div ref={ref}>child div</div>

})export default class Index extends  Componen{

  constructor(props){

    super(props)

    this.father=React.createRef()

  }

  componentDidMount(){

    this.father.current.value='test'  }

  render(){

    return <Child ref={this.father} />

  }

}

源码:

import warningWithoutStack from 'shared/warningWithoutStack';export default function forwardRef<Props, ElementType: React$ElementType>(

  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,

) {

  //__DEV__可不看  if (__DEV__) {

    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {

      warningWithoutStack(

        false,

        'forwardRef requires a render function but received a `memo` ' +

          'component. Instead of forwardRef(memo(...)), use ' +

          'memo(forwardRef(...)).',

      );

    } else if (typeof render !== 'function') {

      warningWithoutStack(

        false,

        'forwardRef requires a render function but was given %s.',

        render === null ? 'null' : typeof render,

      );

    } else {

      warningWithoutStack(

        // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object        render.length === 0 || render.length === 2,

        'forwardRef render functions accept exactly two parameters: props and ref. %s',

        render.length === 1          ? 'Did you forget to use the ref parameter?'          : 'Any additional parameter will be undefined.',

      );

    }

    if (render != null) {

      warningWithoutStack(

        render.defaultProps == null && render.propTypes == null,

        'forwardRef render functions do not support propTypes or defaultProps. ' +

          'Did you accidentally pass a React component?',

      );

    }

  }

  return {

    //被forwardRef包裹后,组件内部的$$typeof是REACT_FORWARD_REF_TYPE    $$typeof: REACT_FORWARD_REF_TYPE,

    //render即包装的FunctionComponent,ClassComponent是不用forwardRef的    render,

  };

}

解析

    不看__DEV__的话,返回的也是一个Object,也就是说,Child被forwardRef包裹后,React.forwardRef(Child)的$$typeof是REACT_FORWARD_REF_TYPE

注意:

一旦在Father组件中,用JSX引用了Child组件,那么就是React.createElement(React.forwardRef(Child)),又包裹了一层,此时的$$typeof`是`REACT_ELEMENT_TYPE`,`type`是`React.forwardRef(Child)`,`type`里面的`$$typeof是REACT_FORWARD_REF_TYPE

3.React.forwardRef()结合next.js的link进行路由跳转

import React, { Component } from 'react';

import Link from 'next/link';

import Router from "next/router";

const RedLink=React.forwardRef((props,ref)=>{

    return (

        <a href={props.href} ref={ref}>子集组件</a>

    )

})

class index extends Component {

    render() {

        return (

            <div>

                <h2>子集是组件的跳转,</h2>

                <small>不知道为什么只能用a</small>

                <Link href="/list" passHref>

                     <RedLink/>

                </Link>

            </div>

        );

    }

}

export default index;

最后编辑于:2024-10-01 17:41:54


喜欢的朋友记得点赞、收藏、关注哦!!!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部