React函数组件和Class组件使用forwardRef传递ref

// 函数组件使用forwardRef传递ref
const ForwardRefComponent = React.forwardRef((props, ref) => 
this)} {...props}>子组件DOM
)

export default function TestRef() {
  let myRef = null;
  return (
    <>
       {
        console.info(myRef);
      }}>按钮
       (myRef = r)} />
      
  )
}

// Class组件使用forwardRef传递ref
class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
this.props.forwardedRef}>这是子组件DOM
    )
  }
}

const wrapper = function (InnerComponent) {
  return React.forwardRef((props, ref) => {
    return (
      
    )
  })
}

const W = wrapper(Child)

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return (
      

         {
          console.info(this.myRef.current);
        }}>按钮
        this.myRef} { ...this.props}/>
      
    )
  }
}