React v16 – 通過包裝組件將 ref 從子級傳遞給父級

Question

我有一個現有的組件層次結構，如下所示：

const Parent = props => {
  const divElement = useRef()
  // do something with divElement
  return <Child ref={divElement} {...some props} />
}

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}><some stuff here></div>
}

這一切都很好，但是現在我需要有條件地添加一個包裝器組件，它包裝<Child>組件以添加一些特殊情況的道具。

基本上我想要的是這樣的：

const Parent = props => {
  const divElement = useRef()
  // do something with divElement
  return someCondition ? <Wrapper {...some props} /> : <Child ref={divElement} {...some props} />
}

const Wrapper = props => {
  return <Child {...different props} />
}

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}><some stuff here></div>
}

我一直堅持如何將Child通過Wrapper的ref傳遞回Parent ，因此無論Wrapper是否存在， Parent都可以訪問Child的ref ......

Answer 1

您不應該將任何東西從孩子傳遞給父母。 當然你可以使用回調，但你不會使用它們來傳遞 refs 或類似的東西。

您只需要將 Wrapper 也設為 ForwardRef：

const Wrapper = React.forwardRef((props, ref) => {
    return <Child ref={ref} {...your other props} />
})

現在你可以打電話：

return someCondition ? <Wrapper ref={divElement} {...some props} /> : <Child ref={divElement} {...some props} />

你的 ref 將永遠是你想要的 div。

Answer 2

除了像@Reductio 說的那樣使用React.forwardRef之外，您還可以使用自定義道具將 ref 傳遞給孩子，無論是否使用 Wrapper。

我從這里學到了這一點： https://deniapps.com/blog/clarify-react-ref-by-examples通過自定義道具傳遞 ref 要簡單得多。 代碼是這樣的：

const Parent = props => {
  const divElement = useRef()
  // do something with divElement
  return someCondition ? <Wrapper {...some props} forwardedRef={divElement} /> : <Child forwardedRef={divElement} {...some props} />
}

const Wrapper = props => {
  //MAKE SURE "different props" includes the custom props: forwardedRef from props
  return <Child {...different props} />
}

const Child =({forwardRef, ...rest}) => {
  return <div ref={forwardedRef} {...rest}><some stuff here></div>
}