美文网首页
React - refs

React - refs

作者: 隐号骑士 | 来源:发表于2020-08-14 15:58 被阅读0次

Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

方式一: createRef (>= React16.3)

一般在构造函数中将refs分配给实例属性,以供组件的其它方法中使用

  • 对于HTML elements:可以获取元素实例
class App extends React.Component{
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        console.log(this.myRef)
      }
      componentDidMount(){
        this.myRef.current.innerHTML = '1'
      }
      render() {
        return <div ref={this.myRef} />;
      }
}
  • 对于Class Components:可以获取组件类的实例
class App extends React.Component{
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        console.log(this.myRef)
      }
      componentDidMount(){
        this.myRef.current.someMethod() // 也就是说,可以允许父组件调用子组件的方法
      }
      render() {
        return <Children ref={this.myRef} />;
      }
}
class Children extends React.Component{
    someMethod(){
        console.log(123)
    }
      render() {
        return <span>123</span>;
      }
}
  • 对于Function Components:无法获取
function components case

方式二: 回调Refs

React 将在组件挂载时,会调用 ref 回调函数并传入 DOM 元素,当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前,React 会保证 refs 一定是最新的。

class App extends React.Component{
    constructor(props) {
        super(props);
        this.targetRef = null
        this.myRef = (e)=> this.targetRef = e;
      }
      componentDidMount(){
        if(this.targetRef){
            this.targetRef.innerHTML = '123'
        }
      }
      render() {
        return <div ref={this.myRef} />;
      }
}

方式三:String 类型的 Refs (不推荐使用)

它已过时并可能会在未来的版本被移除。

class StringRef extends Component {
  componentDidMount() {
    console.log('this.refs', this.refs);
  }
  render() {
    return (
      <div ref="container">
        StringRef
      </div>
    )
  }
}

方式四: useRef (React Hooks)

import { useRef } from 'react';
function RefExample(props){
    const inputElement = useRef()
    return(<div>
        <input ref={inputElement}></input>
        <button onClick={()=>{
            inputElement.current.focus()
        }}>focus</button>
    </div>)
}
useRef vs createRef
function RefExample(props){
    const counterUseRef = useRef()
    const counterCreateRef = createRef()
    const [counter, setcounter] = useState(0)
    if(!counterUseRef.current){
        counterUseRef.current = counter
    }
    if(!counterCreateRef.current){
        counterCreateRef.current = counter
    }
    return(<div>
        <div>{counter}</div>
        <div>{counterUseRef.current}</div>
        <div>{counterCreateRef.current}</div>
        <div onClick={()=>{
            setcounter(counter + 1)
        }}>add</div>
        </div>)
}

createRef 每次渲染都会返回一个新的引用,而 useRef 每次都会返回相同的引用。

forwardRef

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

使用场景举例

  • 管理焦点,文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库。
    总而言之,都是需要获取到DOM实例的场景

谨慎使用

能使用react数据流完成的操作,尽量不依赖ref
因为这样的方式,很不 “react”

相关文章

  • Refs

    Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。 refs是React组件中非常...

  • 关于react中refs的使用

    在react中,可以使用refs来访问dom,或者在render中创建react对象。 使用refs的主要用途是 ...

  • React 'Refs'

    ref 有两种 ref 方式 ref = ''string" //string ref = {this.saveI...

  • React Refs

    终于看到最后一章了。你可以通过使用 this 来获取当前 React 组件,或使用 ref 来获取组件的引用,实例...

  • React refs

    在一些特殊情况下,直接操作组件实例的方法还是必要或者有利的。所以React提供了一个打破限制的办法,这就是refs...

  • React refs

    1.React.createRef() React.createRef可以给Dom元素添加ref。React.cr...

  • react refs

    以下内容摘自 React文档[https://zh-hans.reactjs.org/docs/refs-and-...

  • React - refs

    Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 方式一:...

  • React refs

    React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。

  • 第五节:React组件:获取DOM元素或子组件实例对象的Refs

    1. 认识refs 1.1 refs说明 refs是React提供的一种访问DOM节点的方式 DOM节点上使用re...

网友评论

      本文标题:React - refs

      本文链接:https://www.haomeiwen.com/subject/dwygdktx.html