1

我有一个现有的组件层次结构，如下所示：

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

我被困在如何将reffrom 从Child后面Wrapper传递到Parent，所以无论是否存在Parent都可以访问Child's ......refWrapper

4

2 回答 2

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。

于 2020-08-07T14:37:00.887 回答
1

除了React.forwardRef像@Reductio 所说的那样使用之外，您还可以使用自定义道具将 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>
}
于 2020-08-09T00:46:00.233 回答