Estoy jugando con OverlayTrigger de React-Bootstrap, que requiere que el componente secundario pasado pueda recibir una ref (indicado en los documentos: https://react-bootstrap.github.io/components/overlays/#overlaytrigger )
Tengo el siguiente código de trabajo:
const Acomponent = forwardRef((props, ref) => { return ( <Button {...props} ref={ref}> {props.children} </Button> ); }); const App = () => { return ( <OverlayTrigger key="right" placement="right" overlay={<Tooltip>Tooltip!!</Tooltip>} > <Acomponent>My component with a tooltip</Acomponent> </OverlayTrigger> ); }; ¿Hay alguna forma en que pueda usar forwardRef en línea o como un componente para evitar todo el repetitivo?
Algo como:
const App = () => { return ( <OverlayTrigger key="right" placement="right" overlay={<Tooltip>Tooltip!!</Tooltip>} > { forwardRef((props, ref) => { <Button {...props} ref={ref}>My component with a tooltip</Button> } } </OverlayTrigger> ); };O:
const App = () => { return ( <OverlayTrigger key="right" placement="right" overlay={<Tooltip>Tooltip!!</Tooltip>} > <ForwardRefWrapper> <Button>My component with a tooltip</Button> </ForwardRefWrapper> </OverlayTrigger> ); };En su ejemplo, AComponent solo representa un Button y nada más, y el Button ya acepta una referencia. Si ese es el caso que tiene, debería poder eliminar AComponent y simplemente hacer esto:
<OverlayTrigger key="right" placement="right" overlay={<Tooltip>Tooltip!!</Tooltip>} > <Button>My component with a tooltip</Button> </OverlayTrigger> Pero es posible que lo simplifique para hacer su pregunta, y AComponent tiene que hacer más cosas que eso. En ese caso: no, no hay opción más corta.
Su primer ejemplo no funcionará porque creará un tipo de componente completamente nuevo cada vez que se renderice la App . Dado que el tipo sigue cambiando, debe desmontarse y volver a montarse cada vez, eliminando cualquier estado en el proceso.
El segundo no funciona, porque ForwardRefWrapper tiene el mismo problema que OverlayTrigger : si solo te dan un apoyo para children con un elemento de un componente de función, no hay forma de saber qué elemento dentro de ese componente de función es la referencia. se supone que debe ser pasado a. De ninguna manera, a menos que escriba código para hacerlo, que es para lo que sirve forwardRef.