React Ref: Three ways

import React from 'react'

export default class RefDemo extends React.Component {
  constructor() {
    super(a)this.objRef = React.createRef()/ / the first

    // { current: null }
  }

  componentDidMount() {
    // console.log(`span1: ${this.refs.ref1.textContent}`)
    // console.log(`span2: ${this.ref2.textContent}`)
    // console.log(`span3: ${this.ref3.current.textContent}`)
    setTimeout(() = > {
      this.refs.stringRef.textContent = 'string ref got'
      this.methodRef.textContent = 'method ref got'
      this.objRef.current.textContent = 'obj ref got'
    }, 2000)}render() {
    return <div>
      <p ref="stringRef">span1</p>/ / the third kind<p ref={ele= > (this.methodRef = ele)}>span2</p>/ / the second<p ref={this.objRef}>span3</p>
    </div>}}Copy the code

import React from 'react'

// The function component also wants to get the DOM through ref
const TargetFunction = React.forwardRef((props,ref) = >(
    <input type="text" ref={ref}/>
))
export default class FrodWordRefDemo extends React.Component {
  constructor() {
    super(a)this.ref = React.createRef()
  }

  componentDidMount() {
    this.ref.current.value = 'ref get input'
  }

  render() {
    return <TargetFunction ref={this.ref}>
    </TargetFunction>}}Copy the code