时间戳

首页 > 解决方案 > React forwardRef: ref 和其他 props

javascript - React forwardRef: ref 和其他 props

问题描述

父组件：

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

  return <Child ref={ref} />
}

和孩子：

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

如果我想传递更多的道具而Child不是 justref怎么办？

我搜索了文档和教程，但一无所获；通过反复试验，我想这会奏效：

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

然后在Child里面，我可以得到这些道具（onClick,,, prop1）prop2。props

这就是我需要做的一切吗？通过把ref作为传递给孩子的最后一个道具？

如果我有多个按钮Child需要一个ref怎么办？

标签： javascriptreactjsuse-refreact-forwardref

解决方案

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

顺序无关紧要。forwardRef从属性中提取 ref 属性并创建一个包装器。

其他道具在（回调函数props中的第一个参数）中可用forwardRef

如果你想使用多个 refs，你可以使用这里的例子。

推荐阅读