Question

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

实际上，我使用上下文组件来定位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} />
  });
}

Node是由createIntersectable包裹的组件。

但是，我始终为null获取ref。我不确定这样做的适当方法。

在HOC中使用反应16.3转发参考的正确方法是什么？

参考转发。在传递之前对ref执行操作

0 个答案: