MENU


Ref Forwarding

In the example of 7.1, we used another intermediate ref to access a method of the grandchild node indirectly. Ref forwarding allows us to access methods of grandchildren directly.


RESETRUNFULL
const CustomTextInput = React.forwardRef((props, ref) => (
   <input type="text" ref={ref} />));class AutoFocusTextInput extends React.Component {
   constructor(props) {
      super(props);
      this.textInput = React.createRef();
   }
   componentDidMount() {      // accessing method of grandchild component directly
      this.textInput.current.focus();
   }
   render() {
      return (<CustomTextInput ref={this.textInput} />);
   }}ReactDOM.render(<AutoFocusTextInput />, document.querySelector('div'));
Using a named function displays the name of the function (eg. 'Forward(MyTextField)' ) in DevTools.
RESETRUNFULL
const CustomTextInput = React.forwardRef(function MyTextField(props, ref) {
  throw "X";
  return (<input type="text" ref={ref} />)});

To scroll to an element:

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })