ref是什么
- ref是React提供的
用来操纵React组件实例
或者DOM元素
的接口
如何使用ref
你不能在函数组件上使用 ref 属性,因为他们没有实例
- 使用:
- 使用
React.createRef()
创建 - 将ref属性附加到React元素上
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }
- 使用current属性来访问DOM上绑定的对象
- 当
ref
属性用于 HTML 元素时,构造函数中使用React.createRef()
创建的ref
接收底层 DOM 元素作为其current
属性。 - 当
ref
属性用于自定义 class 组件时,ref
对象接收组件的挂载实例作为其current
属性。
- 当
- 使用
ref的应用场景
- 管理焦点,选择文本或媒体播放。
- 触发式动画。
- 与第三方DOM库集成。