开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
官方文档
zh-hans.reactjs.org/docs/forwar…
涉及一个报错问题 React.forward
Ref写组件有遇到过这种报错吧，想过是为什么吗
devScripts.js： 6523 Warning：Function components can not be given refs.Attempts to access this ref willfail.Did you mean to use React.forward Ref() ?
业务实践
之前写项目有一个列表页面的场景，通过表单查询，利用fusion的CascaderSelect组件封装了一个选择的组件。但是在用Fusion提供的Form组件和Field辅助工具类的时候, React却会给出“Function components can not be given refs."的警告，并提示使用forwardRef，也就是上文提到的报错。
我查了解决方法，加一个React.forwardRef()包裹，能很好的解决的问题，但是并没有详细的介绍为什么这样加？
React.forwadRef((props, ref)=>{
//组件逻辑
return(
<Select
dataSource={categories}
ref={ref}
{… props}
/>
)
})
总结
一般这种问题出现在我们重写select这类包含在form表单里的组件，虽然没有传ref， 但是form是内含的， 不使用React.forwardRef还是会报错。也就是说，Field自定义组件要包裹React.forwardRef()
Ref转发是一项将ref自动地通过组件传递到其一子组件的技巧。组件通过Ref转发，可以把子元素到ref引用暴露给更高层的组件。
这是Field中通过回调形式的ref引用了选择组件，而ref本身并不是一个prop，所以并不会通过props传递给组件。 因为传数据的时候有要求
<Form ref={ref}>
可以这么传吗，不可以，这里相当于props，因为ref相当于react的关键字， props里是不能传关键字的。这就用到了React 16.3提供了一个forwardRef的函数,forwardRef能够将ref引用传递给下游子组件，也适用于解决之前HOC包装组件所带来的ref引用不对的问题。
fusion组件的自定义form为什么必须要包ref有以下解释
**
