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>
}

我一直在想如何将 ref 从 Child 通过 Wrapper 传递回 Parent，以便 Parent 可以访问Child的ref不管Wrapper有没有...

Answer 1

您不应该将任何从 child 传递到 parent。当然你可以使用回调，但你不会用它们来传递引用或类似的东西。

你应该让 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} />

您的推荐人将永远是您想要的 div。

Answer 2

除了像@Reductio 所说的那样使用 React.forwardRef 之外，您还可以使用自定义道具将 ref 传递给 children，无论是否使用 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>
}

React v16 – 通过包装器组件将 ref 从子级传递到父级

React v16 – pass ref from child to parent through a wrapper component

javascript

reactjs

ref

react-forwardref