6

I'm building a React application using TypeScript.

I want to create button, that scrolls to a header of a child component on my main page.

I've created a ref in the child component, following this stack overflow answer and (tried to) use forward refs to access it on my parent component.

export class Parent extends Component {
  private testTitleRef!: RefObject<HTMLHeadingElement>;

  scrollToTestTitleRef = () => {
    if (this.testTitleRef.current !== null) {
      window.scrollTo({
        behavior: "smooth",
        top: this.testTitleRef.current.offsetTop
      });
    }
  };

  render() {
    return <Child ref={this.testTitleRef} />
  }
}

interface Props {
  ref: RefObject<HTMLHeadingElement>;
}

export class Child extends Component<Props> {
  render() {
    return <h1 ref={this.props.ref}>Header<h1 />
  }
}

Unfortunately when I trigger scrollToTestTitleRef I get the error:

Cannot read property 'current' of undefined

Meaning that the ref is undefined. Why is that? What am I doing wrong?

EDIT: Estus helped me to create the ref. But when I trigger the scrollToTestTitleRef() event, it doesn't scroll. When I console.log this.testTitleRef.current I get the output:

{"props":{},"context":{},"refs":{},"updater":{},"jss":{"id":1,"version":"9.8.7","plugins":{"hooks":{"onCreateRule":[null,null,null,null,null,null,null,null,null,null,null,null],"onProcessRule":[null,null,null],"onProcessStyle":[null,null,null,null,null,null],"onProcessSheet":[],"onChangeValue":[null,null,null],"onUpdate":[null]}},"options":{"plugins":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]}},"sheetsManager":{},"unsubscribeId":null,"stylesCreatorSaved":{"options":{"index":-99999999945},"themingEnabled":false},"sheetOptions":{},"theme":{},"_reactInternalInstance":{},"__reactInternalMemoizedUnmaskedChildContext":{"store":{},"storeSubscription":null},"state":null}

Note: I deleted the keys of cacheClasses, _reactInternalFiber and __reactInternalMemoizedMaskedChildContext, because they contained cyclic dependencies.

So current doesn't seem to have a key of offsetTop. Does this maybe have something to do with the fact that in my real application the child component is wrapped inside material-ui's withStyle and React-Redux' connect?

J. Hesters
  • 13,117
  • 31
  • 133
  • 249

1 Answers1

3

! non-null assertion operator suppresses the actual problem. There is no way in JavaScript/TypeScript how testTitleRef property could be assigned from being used as <Child ref={this.titleRef} />, so it stays undefined (there's also inconsistency with testTitleRef and titleRef).

It should be something like:

  private testTitleRef: React.createRef<HTMLHeadingElement>();

  scrollToTestTitleRef = () => {
      if (!this.testTitleRef.current) return;

      window.scrollTo({
        behavior: "smooth",
        top: this.testTitleRef.current.getBoundingClientRect().top + window.scrollY
      });
  };
  render() {
    return <Child scrollRef={this.testTitleRef} />
  }

and

export class Child extends Component<Props> {
  render() {
    return <h1 ref={this.props.scrollRef}>Header<h1 />
  }
}
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Thank you! The inconsistency was just because I jotted down that examply quickly for this question. I created the ref your way, and it doesn't crash anymore. It still doesn't work. I added more info to the question. Could you please help me further? – J. Hesters Nov 10 '18 at 18:32
  • I didn't pay attention to Child, but yes, a ref is class instance, not DOM element. You could do `el = ReactDOM.findDOMNode(this.testTitleRef.current)` but actually this may not be a good idea to do this with `ref` because this wouldn't work at all with function component (they have no refs), also a component may render to multiple DOM elements or no elements at all. I'd suggest to refactor the code to make components decide themselves which element should expose as scroll box, e.g. `` and assign `this.props.scrollRef.current` to `h1` ref inside Child. – Estus Flask Nov 10 '18 at 18:56
  • Btw, see https://stackoverflow.com/a/51828976/3731501 , it already suggests something like this, notice that it passes `refProp` and not `ref` to a child. – Estus Flask Nov 10 '18 at 19:03
  • Thank you for your help! You are helping me tremendously. I switched `ref` to `refProp` and set the ref to `h1` now it scrolls, but it scrolls to the top of the document, and not to the header of the child. If I log `this.props.scrollRef.current` it correctly gives out the `

    `. Do you have any idea what could cause this?     – J. Hesters Nov 11 '18 at 07:55
  • Can you provide a demo to debug? – Estus Flask Nov 11 '18 at 07:59
  • Hardly, because the real application has hundres of lines of code. If I strip something it might be what causes the bug. If I console.log `this.props.scrollRef.current.offsetTop` it gives me 32px what is the height of the heading and it's margin, but not the total distance between the element and the top of the window. – J. Hesters Nov 11 '18 at 08:07
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183439/discussion-between-j-hesters-and-estus). – J. Hesters Nov 11 '18 at 08:07
  • Yes, I guess that's the problem here, and you need absolute Y offset. E.g. https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element – Estus Flask Nov 11 '18 at 08:11
  • Thank you Here is the code that I ended up using: `this.testTitleRef.current.parentElement!.getBoundingClientRect().top`. Would you mind adding this to your answer so I can accept it? – J. Hesters Nov 11 '18 at 11:11
  • Sure. But `parentElement` looks fishy. Why is it needed here? I wouldn't expect it to work ok in the code you posted, it would refer to Parent's container instead of Child's `

    `.

     – Estus Flask Nov 11 '18 at 15:37
  • To be honest that was just try and error until the scroll worked correctly – J. Hesters Nov 12 '18 at 19:57
  • This depends on the layout but I'd expect `parentElement` to be harmful here. – Estus Flask Nov 12 '18 at 20:05