javascript - React forwardRef 从未定义，即使在重新渲染之后

Question

编辑：这个问题是因为我试图将 forwardRef 与 Redux 连接一起使用。看看这篇文章的解决方案。

我正在尝试使用 React.forwardRef 访问父组件中的 DOM 元素。问题是 ref.current 永远不会被定义，即使在第一次渲染之后也是如此。

在这个父组件中，我想从一个子组件访问一个 DOM 元素：

const MyFunctionComponent = () => {
  const bannerRef = useRef<HTMLDivElement>(null);

  let bannerIndent = useRef<string>();

  useEffect(() => {
    // bannerRef.current is ALWAYS null. Why?
    if (bannerRef.current) {
    // this conditional block never runs, so bannerIndent is never defined
      const bannerWidth = bannerRef.current.getBoundingClientRect().width;
      bannerIndent.current = `${bannerWidth}px`;
    }
  }, []);

  return (
    <>
      <Banner ref={bannerRef} />
      <ComponentTwo bannerIndent={bannerIndent.current} />
    </>
  )
}

接收转发的 ref 的组件：

const Banner = React.forwardRef<HTMLDivElement, Props> ((props, ref) => (
  <div ref={ref} />
));

需要从转发的 ref 派生的一些数据的组件：

const ComponentTwo = (props: {bannerIndent?: string}) => (
  <StyledDiv bannerIndent={props.bannerIndent} />
)

// styled.div is a styled-component
const StyledDiv = styled.div<{bannerIndent?: string}>`
  ... // styles, some of which depend on bannerIndent
`

对讨论 forwardRef 始终为 null 或 undefined 的现有 SO 问题的答案指出 ref 只会在第一次渲染后定义。我不认为这是这里的问题，因为 useEffect 应该在第一次渲染之后运行，但 bannerRef.current 仍然为空。

如果在带有普通 ref 的 Banner 组件内部使用，使用useEffect 挂钩设置 bannerIndent 值的逻辑可以正常工作。但是，我需要将 ref 放在父组件中，以便可以将 bannerWidth（使用转发的 ref 生成）传递给 Banner 组件的兄弟。

帮助将不胜感激：D

标签： javascriptreactjstypescriptreact-hooksreact-forwardref