react中如何使用refs

最新推荐文章于 2025-02-14 08:45:04 发布

XiaoHuangDiLHD

最新推荐文章于 2025-02-14 08:45:04 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/XiaoHuangDiLHD/article/details/84649137

react 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了在React中如何使用Refs来访问DOM元素或组件实例，包括直接使用React.createRef()，通过ref回调函数，以及在组件间传递refs的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.直接使用React.createRef（）

class a extends React.Component {
    constructor(props) {
        super(props)
        this.firstRef = React.createRef()
    }
    
    render() {
        return <div ref={this.firstRef}>get div referened</div>
    }
}

此时this.firstRef就是div这个标签的应用。类组件也可以使用这种方法。但是获取引用是挂载的实例，而不是dom标签的引用。但是函数式的组件不可以使用，因为函数式的组件没有实例

2.使用ref回调函数的形式

class a extends React.Component {
    constructor(props) {
        super(props)

        this.firstRef = null

        this.getFirstRef = element => {
            this.firstRef = element
        }
    }
    
    render() {
        return <div ref={this.getFirstRef}>get div referened</div>
    }
}

此时this.firstRef就是div标签的引用。

3.refs在组件之间的传递

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

此时this.inputElement就是input标签的引用。就是通过props将inputRef传递给CustomTextInput，然后CustomTextInput通过ref属性传递给input标签。其实跟上一个通过函数传递大同小异。