如何解决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>
})
成功了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。