React的forwardRef

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/THEANARKH/article/details/89368439

class C extends React.Component {
 render() {
   return null
 }
}
class B extends React.Component {
  render() {
    return <C />;
  }
}
const ref = React.createRef();
class App extends React.Component {
 
  render() {
    return (
      <B ref={ref}>
	  </B>
    )
  }

上面的代码中，ref拿到的是B的实例。

class C extends React.Component {
  render() {
    return null
  }
 }
 class B extends React.Component {
   render() {
     return <C ref={this.props.forwardedRef}/>;
   }
 }
 const A = React.forwardRef((props, ref) => {
  return (
    <B forwardedRef={ref}></B>
  )
})
window.ref = React.createRef();
export default class App extends React.Component {

  render() {
    return (
      <A ref={window.ref}></A>
    )
  }
}

上面的代码中，ref拿到的是C的实例