react中refs的作用是什么？有几种用法？

最新推荐文章于 2024-08-02 09:52:24 发布

一个大长腿

最新推荐文章于 2024-08-02 09:52:24 发布

阅读量660

点赞数 9

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zybijiso666/article/details/135707834

版权

本文介绍了React中ref的作用，包括获取组件或DOM元素的引用，区分了字符串ref与回调函数ref的用法，并强调了在Reactv16.3之后推荐使用回调函数ref以及如何在函数组件中使用useRefHook。

摘要由CSDN通过智能技术生成

在 React 中，ref 是用来获取组件或 DOM 元素的引用的一种方式。ref 可以在组件挂载后被访问，并且允许您从组件中访问底层的 DOM 元素或组件实例。

ref 有两种用法：字符串 ref 和回调函数 ref。

字符串 ref（string refs）是一种早期的使用 ref 的方式。它通过设置 ref 属性为一个字符串，将 ref 关联到一个 DOM 元素或组件实例上。然后可以通过 this.refs 获取这个 ref。

class MyComponent extends React.Component {
  componentDidMount() {
    const input = this.refs.myInput;
    input.focus();
  }

  render() {
    return(
      <div>
        <input type="text" ref="myInput" />
      </div>
    );
  }
}

回调函数 ref（callback refs）是一种现代而常用的使用 ref 的方式。它通过设置 ref 属性为一个回调函数，将 ref 关联到一个 DOM 元素或组件实例上。当组件挂载或卸载时，React 会调用这个回调函数，并将 DOM 元素或组件实例作为参数传递进去。
```
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = null;
  }

  componentDidMount() {
    this.inputRef.focus();
  }

  setInputRef = (ref) => {
    this.inputRef = ref;
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.setInputRef} />
      </div>
    );
  }
}
```
需要注意的是，字符串 ref 在 React v16.3 之后被废弃了，建议使用回调函数 ref。此外，对于函数组件，可以使用 useRef Hook 来获取组件或 DOM 元素的引用