以前的字符串式refs（this.refs.xxx）已被遗弃，这里整理的都是最新版本的用法
前言：
先说下React refs的主要用途吧，主要用于直接调用某个节点或者组件实例。
我把它的各种用法大致分为了两大类
一类：是没有跨越中间子组件的节点或实例，也就是单个组件内部调用其直接return中包含的React元素，或者是return中包含其他自定义组件。
二类：是跨越了中间子组件的节点或实例，如：父组件调用自定义组件中的某个React元素。
特别说明：ref是不能作用到函数组件上的，但是可以在函数组件中使用ref，因为函数组件没有实例。ref本身返回也是某个节点，或者某个组件的实例。
这样说着似乎有些抽象空洞，下边上张对比图好了
下边具体笔录下这2类具体的用法
一类：不跨越层级的用法
1：常规用法
React.createRef() 和 ref的配合使用
用例：
import * as React from "react";
import * as ReactDOM from "react-dom";
const {Component, createRef} = React;
const myRef= createRef<HTMLDivElement>();
class App extends Component{
render() {
return (
<div ref={myRef}>Hello world</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
2：ref回调（个人最爱的一种方式）
这种低版本的React也是支持的，它不同于createRef()，它接受一个函数，以dom元素或者React组件实例作为参数，以使它们能在其他地方被存储和访问。
import * as React from "react";
import * as ReactDOMfrom "react-dom";
const {Component} = React;
class App extends Component{
myRef;
componentDidMount() {
this.myRef&& console.log("=========>>>", this.myRef);
}
render() {
return (
<div ref={(node) => this.myRef= node}>Hello world</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
二类：跨越层级的用法
一种：ref转发
主要通过forwardRef 和 createRef的配合使用
官方并不推荐使用它，下边是官方的建议内容！
当你开始在组件库中使用 forwardRef 时，你应当将其视为一个破坏性更改，并发布库的一个新的主版本。 这是因为你的库可能会有明显不同的行为（例如 refs 被分配给了谁，以及导出了什么类型），并且这样可能会导致依赖旧行为的应用和其他库崩溃。
出于同样的原因，当 React.forwardRef 存在时有条件地使用它也是不推荐的：它改变了你的库的行为，并在升级 React 自身时破坏用户的应用。
用例：
import * as React from "react";
import * as ReactDOM from "react-dom";
const {Component, createRef, forwardRef} = React;
const myRef= createRef<any>();
class App extends Component{
componentDidMount() {
myRef&& console.log("=========>>>", myRef);
}
render() {
return (
<Child ref={myRef}/>
);
}
}
const Child= forwardRef((props, ref: any) => (<div ref={ref}>Hello world</div>));
ReactDOM.render(<App/>, document.getElementById("root"));
在高阶组件中转发 refs
用例：
二种：将ref的值作为组件的属性往下传递到目标节点或者实例。
1：传递createRef
用例：
import * as React from "react";
import * as ReactDOM from "react-dom";
import {RefObject} from "react";
const {Component, createRef} = React;
const myRef= createRef<HTMLDivElement>();
interface ChildProps {
refInfo: RefObject<HTMLDivElement>
}
class Child extends Component<ChildProps, {}> {
render() {
const {refInfo} = this.props;
return (
<div ref={refInfo}>Hello world</div>
)
}
}
class App extends Component{
componentDidMount() {
myRef && console.log("=========>>>", myRef);
}
render() {
return <Child refInfo={myRef}/>
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
2：传递ref回调
用例：
import * as React from "react";
import * as ReactDOM from "react-dom";
const {Component} = React;
interface ChildProps {
refInfo: any
}
function Child(props: ChildProps) {
return <div ref={(node) => props.refInfo(node)}>Hello world</div>
}
class App extends Component{
myRef;
componentDidMount() {
this.myRef && console.log("=========>>>", this.myRef);
}
refInfoHandler = (p) => this.myRef= p;
render() {
return (<Child refInfo={this.refInfoHandler}/>)
}
}
ReactDOM.render(<App/>, document.getElementById("root"));
网友评论