react的Ref用法

117 阅读1分钟

方式1: string类型绑定

类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获取到节点dom 注意的是 这种方式已经不被最新版的react推荐使用,有可能会在未来版本中遗弃

image.png

方式2: react.CreateRef()

通过在class中使用React.createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中 那么该变量的current则指向绑定的标签dom

image.png

方式3: 函数形式

在class中声明函数,在函数中绑定ref 使用这种方法可以将子组件暴露给父组件以使得父组件能够调用子组件的方法

image.png

通过函数的方法绑定ref可以将整个子组件暴露给父组件

image.png

image.png

注意: react并不推荐过度使用ref,如果能通过state做到的事情,就不应该使用 refs 在你的 app 中“让事情发生”。 过度使用ref并不符合数据驱动的思想