Wie verwende ich React.forwardRef in einer klassenbasierten Komponente?

Ich versuche, React.forwardRef zu verwenden, stolpere aber darüber, wie es in einer klassenbasierten Komponente (nicht HOC) funktioniert.

In den Dokumentbeispielen werden Elemente und Funktionskomponenten verwendet, und es werden sogar Klassen in Funktionen für Komponenten höherer Ordnung eingeschlossen.

Also, beginnend mit so etwas wie dies in ihrer ref.jsDatei:

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

und stattdessen so etwas definieren:

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

oder

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

funktioniert nur: /

Ich weiß auch, dass Refs nicht die richtige Reaktion sind. Ich versuche, eine Canvas-Bibliothek eines Drittanbieters zu verwenden, und möchte einige ihrer Tools in separaten Komponenten hinzufügen. Daher benötige ich Ereignis-Listener und daher Lebenszyklusmethoden. Es kann später einen anderen Weg gehen, aber ich möchte dies versuchen.

Die Dokumente sagen, dass es möglich ist!

Die Weiterleitung von Refs ist nicht auf DOM-Komponenten beschränkt. Sie können Refs auch an Klassenkomponenteninstanzen weiterleiten.

aus dem Hinweis in diesem Abschnitt.

Aber dann verwenden sie HOCs anstatt nur Klassen.

Die Idee, immer die gleiche Requisite für die zu refverwenden, kann durch Proxy-Klassenexport mit einem Helfer erreicht werden.

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}
/>);

Im Grunde genommen sind wir gezwungen, eine andere Requisite zu haben, um den Ref weiterzuleiten, aber dies kann unter der Nabe erfolgen. Es ist wichtig, dass die Öffentlichkeit es als normalen Ref verwendet.

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()} />
)

Sie müssen einen anderen Requisitennamen verwenden, um den Ref an eine Klasse weiterzuleiten. innerRefwird häufig in vielen Bibliotheken verwendet.

Grundsätzlich ist dies nur eine HOC-Funktion. Wenn Sie es mit Klasse verwenden möchten, können Sie dies selbst tun und normale Requisiten verwenden.

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

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

Dieses Muster wird zum Beispiel in verwendet styled-componentsund dort aufgerufen innerRef.

Dies kann mit einer Komponente höherer Ordnung erreicht werden, wenn Sie möchten:

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

Und dann in Ihrer Komponentendatei:

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

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

export default withForwardedRef(Boop)

Ich habe die Arbeit im Voraus mit Tests gemacht und ein Paket dafür veröffentlicht react-with-forwarded-ref: https://www.npmjs.com/package/react-with-forwarded-ref

Wenn Sie dies in vielen verschiedenen Komponenten wiederverwenden müssen, können Sie diese Fähigkeit in etwas wie exportieren withForwardingRef

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

export default withForwardingRef;

Verwendung:

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