React Warning

最近呢在清除控制台中出现的各种warning提示，特此纪念下遇到的warning，以及解决方案。

props

Warning: React does not recognize the dataSource prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase datasource instead. If you accidentally passed it from a parent component, remove it from the DOM element.

• 解决方案： zh-hans.reactjs.org/warnings/un…

ref

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

• 解决方案：reactjs.bootcss.com/learn/manip… （未经包装）

• 我方遇到的问题：使用了react-hook-form（useForm，useController），由此产生的报错、原理现象均一致，但怎么解决，好难哦。。。揪破头皮还没想出来

children attribute

Warning: Received NaN for the children attribute. If this is expected, cast the value to a string.

// 如此写法，可出现上述报错提示
<div>{NaN}</div>

• 查找定位： 用于数值变量的传值错误，导致计算结果为NaN传递给组件作为children attribute值而报的报错（我方错误位置在于列表 页码，页条数，以及实际列表页数量的值间的联动计算错误得到NaN并作为children展示导致的）
• 解决方案： 查找对应的变量