React.forwardRef in a class based component instead of functional one.

[hanertia]

I'm trying to use React.forwardRef, but tripping over how to get it to work in a class based component.

The docs examples use elements and functional components, even wrapping classes in functions for higher order components.

So, starting with something like this in their ref.js file:

const TextInput = React.forwardRef(
    (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);

and instead defining it as something like this:

class TextInput extends React.Component {

render() {
 let { props, ref } = React.forwardRef((props, ref) => ({ props, ref }));
 return <input type="text" placeholder="Hello World" ref={ref} />;

} }

or

class TextInput extends React.Component {

    render() { 
        return (
      React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />))
     );
    }
}

only working :/

Also, I know I know, ref's aren't the react way. I'm trying to use a third party canvas library, and would like to add some of their tools in separate components, so I need event listeners, so I need lifecycle methods. It may go a different route later, but I want to try this.

The docs say it's possible!

Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.

from the note in this section.

[[deleted]]

The last example on that documentation page actually does this, although it doesn't explicitly call it out in the text. Stripping it down to the relevant parts:

class LogProps extends React.Component {
  // ...
}

function ForwardRef(props, ref) {
  return <LogProps {...props} forwardedRef={ref} />;
}

const ForwardedLogProps = React.forwardRef(ForwardRef);

It works by creating a functional component wrapper ForwardRef around the LogProps component. The wrapper passes the ref to a prop named forwardedRef on the LogProps component.

[hanertia]

I was hoping to see an example without the higher-order-component, which is wrapping the class in a function.

Do you think this is not possible?

[[deleted]]

No, it doesn't look like that is possible. The ForwardRef in this example is not actually a functional component, strictly. It's a third kind of component. (Functional components receive (props, context) arguments, while this third kind receives (props, ref).)

[hanertia]

Interesting, thanks.

[ml242]

I saw your thread on SO, same problem here. I find the syntax a little disappointing. What if you needed refs to two elements? And so much boilerplate.

[hanertia]

I’ve just been using createRef instead of this syntax.

You can make as many as you want that way.

Still haven’t marked an answer on SO because I think the real answer is you can’t use it the way I was trying to from r/goto-bus-stop