React forwardRef : ref 및 기타 소품

Question

상위 구성 요소 :

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

  return <Child ref={ref} />
}

그리고 아이 :

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

내가 더 많은 소품을 전달하려면 Child단지보다 ref?

문서와 튜토리얼을 검색했지만 아무것도 찾지 못했습니다. 시행 착오로 이것이 효과가 있다고 생각합니다.

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

다음에 Child, 나는이 소품 (얻을 수있는 onClick, prop1, prop2에서) props.

그게 내가해야 할 전부입니까? ref아이에게 전달하는 마지막 소품으로 넣어 ?

Child필요한 버튼이 두 개 이상 있으면 어떻게 ref합니까?

Answer 1

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

순서는 무관합니다. forwardRef속성에서 ref prop을 추출하고 래퍼를 만듭니다.

다른 props는 props( forwardRef콜백 함수 의 첫 번째 인수)에서 사용할 수 있습니다.

여러 개의 ref를 사용하려면 여기 에서 예제를 사용할 수 있습니다 .

Answer 2

글쎄요, 저는이 접근법을 따랐습니다.

부모 구성 요소

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

  return <Child _ref={ref} />
}

하위 구성 요소

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

그리고 그것은 일했습니다