React之forwardRef的使用

简单来说就是在父组件中获取到子组件的dom，从而对子组件的dom进行操作。

首先考虑一个问题，如果开发过程中不需要拆分组件，只需要用React.createRef()，或者useRef()生成ref，将ref传递给Dom：

这个大家都会操作，这时我们可以通过ref获取button这个dom，从而进行操作。此时就不需要forwarRef。

但是现在有个需求，我想将包含button部分的代码抽离为一个单独的子组件，但是操作button这个dom的逻辑在父组件中，我该怎么做呢？

如果大家经验丰富的话，可能会想，我在父组件中调用React.createRef()，或者useRef()生成ref，然后将ref传递给子组件，子组件通过参数props来获取ref，并将ref传递到相应的dom上。

我可以负责的告诉大家，上面的方法是行不通的，因为组件的props不能传递ref，只能传递属性和方法。

那该怎么办呢? 这时就需要用到React的forwardRef方法了。首先简单介绍下forwardRef，这是一个高阶组件，意思就是传递给forwarRef的是一个组件，其执行结果是返回一个组件。

使用案例如下：

传递给forwarRef的组件与一般的组件不同，不同之处就是组件必须是两个参数，第一个参数是正常的props，第二个就是ref，在父组件中使用经过forwarRef处理的组件时，可以直接使用ref来传递 useRef或者createRef生成的实例。从而在父组件中获取子组件的dom，进行操作。

以上便是react中forwardRef的使用方法，希望对你有所帮助。