React forwardRef：ref和其他道具

问题描述

父组件：

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的按钮怎么办？

解决方法

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

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

props（forwardRef回调函数的第一个参数）中提供了其他道具

如果要使用多个引用，则可以使用示例here。

,

嗯，我遵循了这种方法，

父项

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

  return <Child _ref={ref} />
}

子组件

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

成功了