Reagiere vorwärtsRef: ref und andere Requisiten

Question

Eine übergeordnete Komponente:

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

  return <Child ref={ref} />
}

und das Kind:

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

Was ist, wenn ich mehr Requisiten Childals nur weitergeben möchte ref?

Ich habe Dokumente und Tutorials durchsucht, aber nichts gefunden. und durch Versuch und Irrtum würde das wohl funktionieren:

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

und dann in Child, ich kann diese Requisiten ( onClick, prop1, prop2) aus props.

Ist das alles was ich tun muss? Indem Sie refals letzte Requisite an das Kind übergeben?

Was ist, wenn ich mehr als eine Schaltfläche habe Child, die eine benötigt ref?

Answer 1

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

Die Reihenfolge ist irrelevant. forwardRefExtrahiert die Referenz aus den Eigenschaften und erstellt einen Wrapper.

Die anderen Requisiten sind in verfügbar props(das erste Argument in der forwardRefRückruffunktion)

Wenn Sie mehrere Refs verwenden möchten, können Sie das Beispiel hier verwenden .

Answer 2

Nun, ich war diesem Ansatz gefolgt,

Übergeordnete Komponente

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

  return <Child _ref={ref} />
}

Untergeordnete Komponente

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

Und es hat funktioniert