React forwardRef: ref dan props lainnya

Question

Komponen induk:

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

  return <Child ref={ref} />
}

dan anak itu:

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

Bagaimana jika saya ingin memberikan lebih banyak properti Childdaripada hanya ref?

Saya telah mencari dokumen dan tutorial, tetapi tidak menemukan apa pun; dan dengan trial-and-error, saya rasa ini akan berhasil:

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

dan kemudian di Child, saya bisa mendapatkan alat peraga tersebut ( onClick, prop1, prop2) dari props.

Apakah hanya itu yang perlu saya lakukan? Dengan menempatkan refsebagai penyangga terakhir yang diberikan kepada anak?

Bagaimana jika saya memiliki lebih dari satu tombol Childyang membutuhkan ref?

Answer 1

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

Urutannya tidak relevan. forwardRefmengekstrak prop ref dari properti dan membuat pembungkus.

Props lainnya tersedia di props(argumen pertama dalam fungsi forwardRefcallback)

Jika Anda ingin menggunakan banyak referensi, Anda dapat menggunakan contoh di sini .

Answer 2

Nah, saya telah mengikuti pendekatan ini,

Komponen induk

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

  return <Child _ref={ref} />
}

Komponen anak

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

Dan itu berhasil