React forwardRef: ref và các đạo cụ khác

Question

Một thành phần mẹ:

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

  return <Child ref={ref} />
}

và đứa trẻ:

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

Điều gì sẽ xảy ra nếu tôi muốn chuyển nhiều đạo cụ Childhơn là chỉ ref?

Tôi đã tìm kiếm tài liệu và hướng dẫn, nhưng không tìm thấy gì; và bằng cách thử-và-sai, tôi đoán điều này sẽ hoạt động:

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

và sau đó trong Child, tôi có thể có được những đạo cụ ( onClick, prop1, prop2) từ props.

Đó có phải là tất cả những gì tôi cần làm? Bằng cách đặt refchỗ dựa cuối cùng cho đứa trẻ?

Điều gì xảy ra nếu tôi có nhiều nút trong Childđó cần một ref?

Answer 1

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

Thứ tự không liên quan. forwardReftrích xuất ref prop từ các thuộc tính và tạo một trình bao bọc.

Các đạo cụ khác có sẵn trong props(đối số đầu tiên trong hàm forwardRefgọi lại)

Nếu bạn muốn sử dụng nhiều ref, bạn có thể sử dụng ví dụ ở đây .

Answer 2

Vâng, tôi đã làm theo cách tiếp cận này,

Thành phần chính

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

  return <Child _ref={ref} />
}

Thành phần con

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

Va no đa hoạt động