Як використовувати React.forwardRef в компоненті на основі класу?

Я намагаюся використовувати React.forwardRef, але переживаю, як змусити його працювати в компоненті на основі класу (не HOC).

У прикладах документів використовуються елементи та функціональні компоненти, навіть загортання класів у функції для компонентів вищого порядку.

Так, починаючи з чим - то на кшталт цього в їх ref.jsфайлі:

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

і замість цього визначити це як щось подібне:

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

або

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

працює лише: /

Крім того, я знаю, що я знаю, реакція - це не спосіб реагування. Я намагаюся використовувати сторонні бібліотеки полотна, і хотів би додати деякі їх інструменти в окремі компоненти, тому мені потрібні слухачі подій, тому мені потрібні методи життєвого циклу. Пізніше це може піти іншим маршрутом, але я хочу спробувати це.

Документи кажуть, що це можливо!

Пересилання пересилань не обмежується компонентами DOM. Ви також можете пересилати посилання на екземпляри компонентів класу.

з примітки цього розділу.

Але потім вони продовжують використовувати HOCs, а не просто заняття.

Ідея завжди використовувати одну і ту ж опору для Can refможе бути досягнута шляхом з'єднання експорту класу з помічником.

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

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

Так що в основному, так, ми змушені мати іншу опору для переадресації, але це можна зробити під концентратором. Важливо, щоб громадськість використовувала це як звичайний номер.

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зазвичай використовується в багатьох бібліотеках.

В основному, це лише функція HOC. Якщо ви хотіли використовувати його з класом, можете зробити це самостійно і використовувати звичайні реквізити.

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

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

Цей зразок використовується, наприклад, в styled-componentsі називається innerRefтам.

Це можна досягти за допомогою компонента вищого порядку, якщо вам подобається:

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

Якщо вам потрібно повторно використовувати це в багатьох різницьких компонентах, ви можете експортувати цю здатність на щось подібне 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