React forwardRef: ref和其他属性

Question

一个父组件：

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组件中，我可以从props中获取这些属性(onClick, prop1, prop2)。

这就是我需要做的全部吗？只需将ref作为传递给子组件的最后一个属性吗？

如果在Child组件中有多个需要使用ref的按钮怎么办？

- CSSer

---

Props将接收您在父组件中放置在子组件上的多个值，请遵循第一个注释 :) - Sudhanshu Kumar

Answer 1

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

顺序不重要。forwardRef从属性中提取ref prop并创建一个包装器。

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

如果您想使用多个refs，可以使用此处的示例。

- Peter Keuter

Answer 2

我曾经采用过这种方法，

父组件

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

  return <Child _ref={ref} />
}

子组件

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

它起作用了

- ezio4df

Answer 3

在Typescript中，你可以像下面这样传递props

父组件

const Parent = (props) => {
  <SnackBarComponent
    ref={childRef}
    data={['soap', 'sponge']}
  />
}

子组件

interface ISnackBar {
  data: Array<string>;
}

const SnackBarComponent = forwardRef(({data}: ISnackBar, ref) => {
return(<Text>{data}</Text>)

})

- michael_vons