码云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;
