Estoy tratando de usar React.forwardRef, pero estoy tropezando con cómo hacer que funcione en un componente basado en clases (no HOC).
Los ejemplos de documentos usan elementos y componentes funcionales, incluso envuelven clases en funciones para componentes de orden superior.
Entonces, comenzando con algo como esto en su archivo ref.js :
const TextInput = React.forwardRef( (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />) );y en su lugar definirlo como algo como esto:
class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref })); return <input type="text" placeholder="Hello World" ref={ref} />; } }o
class TextInput extends React.Component { render() { return ( React.forwardRef((props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)) ); } }solo funciona :/
Además, lo sé, lo sé, los árbitros no son la forma de reaccionar. Estoy tratando de usar una biblioteca de lienzo de terceros y me gustaría agregar algunas de sus herramientas en componentes separados, por lo que necesito detectores de eventos, así que necesito métodos de ciclo de vida. Puede que tome una ruta diferente más tarde, pero quiero probar esto.
¡Los documentos dicen que es posible!
El reenvío de referencias no se limita a los componentes DOM. También puede reenviar referencias a instancias de componentes de clase.
de la nota en esta sección.
Pero luego pasan a usar HOC en lugar de solo clases.
La idea de usar siempre el mismo accesorio para la ref se puede lograr mediante la exportación de clase de proxy con un asistente.
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} />);Básicamente, nos vemos obligados a tener un accesorio diferente para enviar la referencia, pero se puede hacer debajo del centro. Es importante que el público lo use como referencia normal.
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()} /> ) Debe usar un nombre de accesorio diferente para reenviar la referencia a una clase. innerRef se usa comúnmente en muchas bibliotecas.
Básicamente, esto es solo una función HOC. Si quisiera usarlo con clase, puede hacerlo usted mismo y usar accesorios regulares.
class TextInput extends React.Component { render() { <input ref={this.props.forwardRef} /> } } const ref = React.createRef(); <TextInput forwardRef={ref} /> Este patrón se usa, por ejemplo, en styled-components y se llama innerRef allí.