来自 React.forwardRef 的 ref 为空

Question

I'm struggling with passing refs between components in React. I've decided to use React.forwardRef but i occur a problem. Here is my code

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>
      </>
    );
  }
}

I need to pass ref.current to and but the problem is that ref.current is always null. Can anybody explain me this behavior and how can i make it works?

Answer 1

In React refs are always assigned after the first render . Trying to access before the first render will give a null object.

One way to get around this is to use conditional rendering

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

Also if you wrote the ParallaxProvider and TransitionProvider components, you can modify them to only use scrollContainer and value respectively when they're not null...

It's worth pointing out that React doesn't rerender on ref change but since this is being passed as a prop to Wrapper , a change in the prop will cause a rerender and you should be able to get ref.current .