即使重新渲染后，React forwardRef也从未定义

问题描述

编辑：导致此问题的原因是我试图将forwardRef与Redux connect结合使用。查看解决方案的this post。

我试图通过使用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} />
    </>
  )
}

接收转发的参考的组件：

const Banner = React.forwardRef<HTMLdivelement,Props> ((props,ref) => (
  <div 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或未定义的现有SO问题的答案指出，该ref仅在第一次渲染后定义。我认为这不是问题所在，因为useEffect应该在第一个渲染之后运行，但是bannerRef.current仍然为null。

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

将不胜感激：D

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）