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

码云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: ReactRef\) =\> ReactNode,

) {

//__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
© 著作权归作者所有,转载或内容合作请联系作者

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

相关推荐
要一起看日出24 分钟前
Shiro概述
java·spring boot·java-ee
acaad32 分钟前
Apache Poi 实现导出excel表格 合并区域边框未完全显示的问题
spring·apache·excel
Q_Q51100828537 分钟前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
王嘉俊9251 小时前
SpringBoot应用开发指南:从入门到高级配置与自动装配原理
java·spring boot·后端·spring·ssm
赵谨言1 小时前
基于数据挖掘技术构建电信5G客户预测模型的研究与应用
经验分享·5g·数据挖掘·毕业设计
维持好习惯2 小时前
复杂Excel文件导入功能(使用AI快速实现)
java·spring boot·excel
choice of2 小时前
SpringMVC通过注解实现全局异常处理
java·后端·spring
单线程bug2 小时前
Spring Boot中Filter与Interceptor的区别
java·spring boot·后端
小蒜学长3 小时前
基于uni-app的蛋糕订购小程序的设计与实现(代码+数据库+LW)
java·数据库·spring boot·后端·小程序·uni-app
麦麦大数据4 小时前
J002 Vue+SpringBoot电影推荐可视化系统|双协同过滤推荐算法评论情感分析spark数据分析|配套文档1.34万字
vue.js·spring boot·数据分析·spark·可视化·推荐算法