Javascript 参考转发。在通过ref之前对其执行操作

我想制作一个能够利用底层dom元素的HOC。为了做到这一点，我一直在调查

实际上，我使用上下文组件来定位DOM节点的位置并注册它们的位置。我试着这样做：

export default function createIntersectable<TProps = {}>(
  Component: React.ComponentType<TProps & { ref: React.RefObject<HTMLElement> }>,
) {
  class Intersectable extends React.PureComponent<ComponentProps<TProps>> {
    componentDidMount() {
      this.props.register(this.props.forwardedRef.current);
    }

    componentWillUnmount() {
      this.props.unregister(this.props.forwardedRef.current);
    }

    render() {
      const { forwardedRef, ...rest } = this.props;
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  return React.forwardRef((props: TProps, ref: React.RefObject<any>) => {
    return (
      <IntersectionContext.Consumer>
        {({ register, unregister }) => (
          <Intersectable
            {...props}
            forwardedRef={ref}
            register={register}
            unregister={unregister}
          />
        )}
      </IntersectionContext.Consumer>
    );
  });
}

renderNodes() {
  return this.props.nodes.map((node) => {
    const ref = React.createRef();
    <Node {...node} ref={ref} key={node.id} />
  });
}

导出默认函数createIntersectable(
组件：React.ComponentType，
) {
类可相交扩展React.PureComponent{
componentDidMount（）{
this.props.register（this.props.forwardedRef.current）；
}
组件将卸载（）{
this.props.unregister（this.props.forwardedRef.current）；
}
render（）{
const{forwardedRef，…rest}=this.props；
返回；
}
}
return React.forwardRef（（props:TProps，ref:React.reobject）=>{
返回(
{（{注册，注销}）=>(
)}
);
});
}

然后我就这样消费它：

export default function createIntersectable<TProps = {}>(
  Component: React.ComponentType<TProps & { ref: React.RefObject<HTMLElement> }>,
) {
  class Intersectable extends React.PureComponent<ComponentProps<TProps>> {
    componentDidMount() {
      this.props.register(this.props.forwardedRef.current);
    }

    componentWillUnmount() {
      this.props.unregister(this.props.forwardedRef.current);
    }

    render() {
      const { forwardedRef, ...rest } = this.props;
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  return React.forwardRef((props: TProps, ref: React.RefObject<any>) => {
    return (
      <IntersectionContext.Consumer>
        {({ register, unregister }) => (
          <Intersectable
            {...props}
            forwardedRef={ref}
            register={register}
            unregister={unregister}
          />
        )}
      </IntersectionContext.Consumer>
    );
  });
}

renderNodes() {
  return this.props.nodes.map((node) => {
    const ref = React.createRef();
    <Node {...node} ref={ref} key={node.id} />
  });
}

renderNodes（）{
返回此.props.nodes.map（（节点）=>{
const ref=React.createRef（）；
});
}

其中，

节点

是由

createIntersectable

包装的组件

但是，我的

ref

始终得到

null

。我不知道该怎么做

用react 16.3在HOC中转发ref的正确方法是什么