Как использовать React.forwardRef в компоненте на основе классов?

По сути, это просто функция HOC. Если вы хотите использовать его с классом, вы можете сделать это самостоятельно и использовать обычные реквизиты.

class TextInput extends React.Component {
    render() {
        <input ref = {this.props.forwardRef} />
    }
}

const ref = React.createRef();
<TextInput forwardRef = {ref} />

Этот шаблон используется, например, в styled-components и там он называется innerRef.

class BeautifulInput extends React.Component {
  const { innerRef, ...props } = this.props;
  render() (
    return (
      <div style = {{backgroundColor: "blue"}}>
        <input ref = {innerRef} {...props} />
      </div>
    )
  )
}

const BeautifulInputForwardingRef = React.forwardRef((props, ref) => (
  <BeautifulInput {...props} innerRef = {ref}/>
));

const App = () => (
  <BeautifulInputForwardingRef ref = {ref => ref && ref.focus()} />
)

Вам нужно использовать другое имя опоры для пересылки ссылки в класс. innerRef обычно используется во многих библиотеках.

Идея всегда использовать одну и ту же опору для ref может быть реализована путем проксирования экспорта класса с помощью помощника.

class ElemComponent extends Component {
  render() {
    return (
      <div ref = {this.props.innerRef}>
        Div has a ref
      </div>
    )
  }
}

export default React.forwardRef((props, ref) => <ElemComponent 
  innerRef = {ref} {...props}
/>);

По сути, мы вынуждены использовать другую опору для пересылки ссылки, но это можно сделать под хабом. Важно, чтобы публика использовала его как обычный справочник.

Если вам нужно повторно использовать это во многих различных компонентах, вы можете экспортировать эту возможность во что-то вроде withForwardingRef.

const withForwardingRef = <Props extends {[_: string]: any}>(BaseComponent: React.ReactType<Props>) =>
    React.forwardRef((props, ref) => <BaseComponent {...props} forwardedRef = {ref} />);

export default withForwardingRef;

Применение:

const Comp = ({forwardedRef}) => (
 <input ref = {forwardedRef} />
)
const EnhanceComponent = withForwardingRef<Props>(Comp);  // Now Comp has a prop called forwardedRef

Это можно сделать с помощью компонента более высокого порядка, если хотите:

import React, { forwardRef } from 'react'

const withForwardedRef = Comp => {
  const handle = (props, ref) =>
    <Comp {...props} forwardedRef = {ref} />

  const name = Comp.displayName || Comp.name
  handle.displayName = `withForwardedRef(${name})`

  return forwardRef(handle)
}

export default withForwardedRef

А затем в вашем файле компонента:

class Boop extends React.Component {
  render() {
    const { forwardedRef } = this.props

    return (
      <div ref = {forwardedRef} />
    )
  }
}

export default withForwardedRef(Boop)

Я выполнил предварительную работу с тестами и опубликовал для этого пакет react-with-forwarded-ref: https://www.npmjs.com/package/react-with-forwarded-ref