React forwardRef: ref i inne rekwizyty

Question

Komponent macierzysty:

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

  return <Child ref={ref} />
}

a dziecko:

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

A co, jeśli chcę przekazać więcej rekwizytów Childniż tylko ref?

Przeszukałem dokumenty i samouczki, ale nic nie znalazłem; i metodą prób i błędów myślę, że to zadziała:

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

a następnie w Child, mogę dostać te rekwizyty ( onClick, prop1, prop2) z props.

Czy to wszystko, co muszę zrobić? Stawiając refjako ostatni rekwizyt przekazujący dziecku?

A jeśli mam więcej niż jeden przycisk, Childktóry wymaga ref?

Answer 1

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

Kolejność nie ma znaczenia. forwardRefwyodrębnia właściwość ref z właściwości i tworzy opakowanie.

Pozostałe propswłaściwości są dostępne w (pierwszy argument funkcji forwardRefzwrotnej)

Jeśli chcesz użyć wielu referencji, możesz użyć przykładu tutaj .

Answer 2

Cóż, zastosowałem to podejście,

Komponent nadrzędny

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

  return <Child _ref={ref} />
}

Komponent podrzędny

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

I zadziałało