React.forwardRef 中的 ref 为 null

Question

我正在努力在 React 的组件之间传递引用。我决定使用 React.forwardRef 但出现问题。这是我的代码

const Wrapper = React.forwardRef((props, ref) => {
  return (
    <StyledWrapper ref={ref} >
      {console.log(ref.current)}
      <ParallaxProvider scrollContainer={ref.current}>
        <TransitionProvider value={ref.current}>{children}</TransitionProvider>
      </ParallaxProvider>
    </StyledWrapper>
  );
});

export default class MainTemplate extends React.Component {
  constructor(props) {
    super(props);
    this.scrollContainer = React.createRef();
  }


  render() {
    const { toggled, overflow } = this.state;
    const { uri, children } = this.props;
    return (
      <>
        <SEO />
        <GlobalStyle />
        <ThemeProvider theme={GlobalTheme}>
          <>
            <Hamburger handleToggle={this.handleToggle} />
            <Perspective active={toggled}>
              <Navigation pathname={uri} handleToggle={this.handleToggle} />
              <Wrapper
                ref={this.scrollContainer}
              >
                {children}
              </Wrapper>
            </Perspective>
          </>
        </ThemeProvider>
      </>
    );
  }
}

我需要将 ref.current 传递给 and 但问题是 ref.current 始终为空。任何人都可以向我解释这种行为以及如何使其发挥作用吗？

Answer 1

在 React 中，引用总是在第一次渲染之后分配。尝试在第一次渲染之前访问将给出空对象。

解决这个问题的一种方法是使用条件渲染

const Wrapper = React.forwardRef((props, ref) => {
    return (
        <StyledWrapper ref={ref} >
            {ref.current && 
                <ParallaxProvider scrollContainer={ref.current}>
                    <TransitionProvider value={ref.current}>{children}</TransitionProvider>
                </ParallaxProvider>
            }
        </StyledWrapper>
    );
});

另外，如果您编写了ParallaxProvider和TransitionProvider组件，则可以将它们修改为仅在它们不为空时分别使用scrollContainer和......value

值得指出的是，React 不会在 ref 更改时重新渲染，但由于这是作为 prop 传递给 的Wrapper，所以 prop 中的更改将导致重新渲染，并且您应该能够获得ref.current.