react中refs的作用是什么？有几种用法？-Toy模板网

这篇具有很好参考价值的文章主要介绍了react中refs的作用是什么？有几种用法？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 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 元素的引用文章来源地址https://www.toymoban.com/news/detail-807824.html

到了这里，关于react中refs的作用是什么？有几种用法？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！