React forwardRef: ref e outros adereços

Question

Um componente pai:

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

  return <Child ref={ref} />
}

e a criança:

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

E se eu quiser passar mais adereços do Childque apenas ref?

Pesquisei documentos e tutoriais, mas não encontrei nada; e por tentativa e erro, acho que isso funcionaria:

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

e depois em Child, posso obter estes suportes ( onClick, prop1, prop2) a partir props.

Isso é tudo que preciso fazer? Colocando refcomo último objeto a passar para a criança?

E se eu tiver mais de um botão Childque precisa de um ref?

Answer 1

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

A ordem é irrelevante. forwardRefextrai o ref prop das propriedades e cria um wrapper.

Os outros adereços estão disponíveis em props(o primeiro argumento na forwardReffunção de retorno de chamada)

Se você quiser usar várias referências, pode usar o exemplo aqui .

Answer 2

Bem, eu segui essa abordagem,

Componente pai

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

  return <Child _ref={ref} />
}

Componente filho

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

E funcionou