什么是refs?
Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 Ref转发是一项将ref自动通过组件传递到子组件的技巧。 通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React元素。
refs的使用场景
在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素,例如:
- 管理焦点,文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
如何使用refs?
方式一: createRef (>= React16.3)
一般在构造函数中将refs分配给实例属性,以供组件的其它方法中使用
代码语言:javascript复制//对于HTML elements:可以获取元素实例
class App extends React.Component{
constructor(props) {
super(props);
//一般来说,我们需要在constructor里面初始化一个ref,然后就能在return里用了
this.myRef = React.createRef();
console.log(this.myRef)
}
componentDidMount(){
this.myRef.current.innerHTML = '赛亚人'
}
render() {
return <div ref={this.myRef} />;
}
}
//上面的this.myRef有一个current属性:
//如果ref属性被用于html元素,那么它的值是底层DOM元素。
代码语言:javascript复制//对于Class Components:可以获取组件类的实例
class App extends React.Component{
constructor(props) {
super(props);
this.myRef = React.createRef();
console.log(this.myRef)
}
componentDidMount(){
this.myRef.current.bianshen() // 也就是说,可以允许父组件调用子组件的方法
}
render() {
return <Children ref={this.myRef} />;
}
}
class Children extends React.Component{
bianshen(){
console.log('超级赛亚人变身')
}
render() {
return <span>超级赛亚人变身</span>;
}
}
//上面的this.myRef有一个current属性:
//如果ref属性被用于自定义类组件,那么它的值是已挂载的这个自定义类组件的实例。
提示:对于Function Components:无法获取
方式二: 回调Refs
React 将在组件挂载时,会调用 ref 回调函数并传入 DOM 元素,当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前,React 会保证 refs 一定是最新的。
代码语言:javascript复制class App extends React.Component{
constructor(props) {
super(props);
this.targetRef = null
this.myRef = (e)=> this.targetRef = e;
}
componentDidMount(){
if(this.targetRef){
this.targetRef.innerHTML = '贝吉塔'
}
}
render() {
return <div ref={this.myRef} />;
}
}
方式三:String 类型的 Refs (已过时,不推荐使用)
代码语言:javascript复制class StringRef extends Component {
componentDidMount() {
console.log('this.refs', this.refs);
}
render() {
return (
<div ref="container">
StringRef
</div>
)
}
}
方式四: useRef (React Hooks)
代码语言:javascript复制import { useRef } from 'react';
function RefExample(props){
const inputElement = useRef()
return(<div>
<input ref={inputElement}></input>
<button onClick={()=>{
inputElement.current.focus()
}}>focus</button>
</div>)
}
本文内容如有错误,请以官方文档为准。
这篇博客借鉴了很多大佬博客中的思路,非常感谢大佬们的无私共享!