React通过forwardRef获取函数组件内某个DOM节点或者⼦组件
的实例
在React当中，function组件返回的是⼀段jsx代码，对于function组件本⾝来说，是没有实例的，因此如果我们在引⽤⼀个function组件时如果设置了⼀个ref属性是⽆效的，React还会做出⼀些检查并给出错误提⽰，例如:
<div id="root"></div>
<script type="text/babel">
function MyComponent(props){                              //MyComponent是⼀个函数组件
return <input type="text"/>
}
class App extends React.Component{
ref = ateRef();
componentDidMount(){
console.f.current)                        //挂载完成后打印f.current
}
render(){
return  <div><MyComponent ref={f}/></div>      //引⽤函数组件时使⽤ref尝试获取该函数组件实例
}
}
</script>
执⾏后控制台输出如下:
意思就是对于function组件来说，不能给他直接给他设置ref，另外打印出来的也是null
对于function组件来说，我们可以⽤React.forwardRef()来实现，具体的做法是把function组件作为参数传递给React.forwardRef()，然后function组件可以带两个参数，分别是props和ref，在function组件内部返回的jsx中可以给某个DOM节点或⾃组件设置ref属性，值就是这个函数组件的参数⼆，例如:
function myComponent(props,refObj){
return <div>
<p ref={refObj}>123</p>        //这⾥refObj就是传⼊的参数2了
</div>
}
举个栗⼦，和上⼀节的⼏个ref例⼦实现的效果⼀样，我们⽤函数组件也实现⼀个类似的效果，如下:
<div id="root"></div>
<script type="text/babel">
const MyComponent = React.forwardRef((props,ref)=>(                    //传递了⼀个props和ref属性，我们先⽤props进⾏初始化
<p ref={ref}>no:{}</p>
))
class App extends React.Component{
state = {no:1}
domp = ateRef();
test= ()=>{ this.Content = 'no:'+ ++ }  //之后点击测试按钮后就修改MyComponent组件内p元素的textContent
render(){
return  <div>
<button onClick={st}>测试</button>
<MyComponent no={} ref={this.domp}/>          //这⾥指定ref属性为f，之后就可以通过this.domp来访问MyComponent组件内的p节点对象了              </div>
}
}
react router dom 6</script>
效果和上⼀节的是⼀样的，就不演⽰了，我们这⾥使⽤了props传值进⾏初始化，之后点击测试按钮时就同构this.domp获取
到MyComponent组件内的p元素实例，然后通过原⽣的textContent属性设置其⽂本内容。