React中refs的一些常見(jiàn)用法匯總

目錄

什么是Refs

Refs 提供了一種方式，允許我們訪(fǎng)問(wèn) DOM 節點(diǎn)或在 render 方法中創(chuàng )建的 React 元素。
Ref轉發(fā)是一項將ref自動(dòng)通過(guò)組件傳遞到子組件的技巧。 通常用來(lái)獲取DOM節點(diǎn)或者React元素實(shí)例的工具。在React中Refs提供了一種方式，允許用戶(hù)訪(fǎng)問(wèn)dom節點(diǎn)或者在render方法中創(chuàng )建的React元素。

Refs轉發(fā)

Ref 轉發(fā)是一個(gè)可選特性，其允許某些組件接收 ref，并將其向下傳遞（換句話(huà)說(shuō)，“轉發(fā)”它）給子組件。

默認情況下，不能在函數組件上使用 ref 屬性，因為它們沒(méi)有實(shí)例：

一、String 類(lèi)型的 Refs

不建議使用，因為 string 類(lèi)型的 refs 。它已過(guò)時(shí)并可能會(huì )在未來(lái)的版本被移除。

import React from "react";
// 父組件
export default class StringRef extends React.PureComponent {
  componentDidMount() {
    console.log("stringRefDom:", this.refs.stringRefDom);
    console.log("stringRefComp:", this.refs.stringRefComp);
  }
  render() {
    return (
      <div>
        {/*原生組件使用方式*