React forwardRef: ref e altri oggetti di scena

Question

Un componente genitore:

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

  return <Child ref={ref} />
}

e il bambino:

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

E se volessi passare più oggetti di scena Childoltre a quello giusto ref?

Ho cercato documenti ed esercitazioni, ma non ho trovato nulla; e per tentativi, immagino che funzionerebbe:

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

e poi in Child, posso ottenere questi oggetti di scena ( onClick, prop1, prop2) da props.

È tutto quello che devo fare? Mettendo refcome ultimo oggetto di scena il passaggio al bambino?

Cosa succede se ho più di un pulsante Childche necessita di un ref?

Answer 1

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

L'ordine è irrilevante. forwardRefestrae il prop ref dalle proprietà e crea un wrapper.

Gli altri oggetti di scena sono disponibili in props(il primo argomento nella forwardReffunzione di callback)

Se vuoi usare più ref puoi usare l'esempio qui .

Answer 2

Bene, avevo seguito questo approccio,

Componente genitore

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

  return <Child _ref={ref} />
}

Componente figlio

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

E ha funzionato