React 深度学习:forwardRef

953 阅读1分钟

path:

源码

import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';

import warningWithoutStack from 'shared/warningWithoutStack';

export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  if (__DEV__) {
    // do something
  }

  return {
    ?typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}

forwardRef 方法接收一个渲染函数作为其唯一参数,这个渲染函数有两个参数:

  • props 传入组件的所有 props,除 ref
  • ref 传入组件的 ref 属性

forwardRef 方法返回一个 React 组件。

遗留问题

  • React forwardRef 生成的组件在如何在解析的时候剥离出 ref 属性的。