React forwardRef: ref y otros accesorios

Question

Un componente principal:

const Parent = (props) => {
  const ref = useRef();

  return <Child ref={ref} />
}

y el niño:

const Child = forwardRef((props, ref) => {
  return <button ref={ref} ...>click</button>
})

¿Qué pasa si quiero pasar más accesorios Childque solo ref?

Busqué documentos y tutoriales, pero no encontré nada; y por prueba y error, supongo que esto funcionaría:

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

y luego en Child, puedo conseguir estos apoyos ( onClick, prop1, prop2) de props.

¿Eso es todo lo que necesito hacer? ¿Poniendo refcomo último atrezzo el paso al niño?

¿Qué pasa si tengo más de un botón Childque necesita un ref?

Answer 1

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

El orden es irrelevante. forwardRefextrae el ref prop de las propiedades y crea un contenedor.

Los otros accesorios están disponibles en props(el primer argumento en la forwardReffunción de devolución de llamada)

Si desea utilizar varias referencias, puede utilizar el ejemplo aquí .

Answer 2

Bueno, había seguido este enfoque,

Componente padre

const Parent = (props) => {
  const ref = useRef();

  return <Child _ref={ref} />
}

Componente hijo

const Child = forwardRef(({ _ref, prop1, prop2, prop3, ...props }) => {
  return <button ref={_ref} ...>click</button>
})

Y funcionó