React⾼阶组件中使⽤React.forwardRef的技巧
之前使⽤react.forwardRef始终⽆法应⽤于react⾼阶组件中，最近终于捣⿎出来了，于是记录下来。关键点就是React.forwardRef的API中ref 必须指向dom元素⽽不是React组件。
⼀、React.forwardRef使⽤⽰例
下⾯就是应⽤到React组件的错误⽰例：
const A=React.forwardRef((props,ref)=><B {...props} ref={ref}/>)
这就是我之前经常犯的错误，这⾥的ref是⽆法⽣效的。
前⾯提到ref必须指向dom元素，那么正确⽅法就应⽤⽽⽣：
const  A=React.forwardRef((props,ref)=>(
<div ref={ref}>
<B {...props} />
</div>
))
⼆、React.forwardRef应⽤到⾼阶组件中
2.1. withComponent类型的⾼阶组件【1】
import React from 'react'
import A from './a.jsx'
import PropTypes from 'prop-types';
function withA(Component){
const ForWardedComponent = React.forwardRef((props, ref) => <div ref={ref}>
<Component {...props} />
</div>);
class MidComponent extends React.Component {
render() {
const props = this.props
return (
<A {...props}>
<ForWardedComponent  ref={props.forwardedRef} {...props}/>
</A>
)
}
}
//对MidComponent组件属性进⾏类型经查
MidComponent.propTypes = {
forwardedRef: PropTypes.object,
}
return  MidComponent
}
exports.withA=withA
这样，在上述⽰例的组件A中，A的周期componentDidMount() 调⽤ this.props.forwardedRef.current ，指向的就是上述⽰例中ForWardedComponent对应的dom元素。
是B组件对应的dom的⽗元素，⽽不是该dom
在a.jsx中某处:
componentDidMount(){
console.log(this.props.forwardedRef.current)
}
最后应⽤实例：
import React from 'react'
import ReactDOM from  'react-dom'
//假设withA存储于withA.js⽂件。
import {withA}  from  './withA.js'
react组件之间通信
const B=()=><h2>hello world</h2>
const B2=withA(B)
class App extends React.Component {
constructor(props) {
super(props)
this.actRef()
}
render() {
return  <div>
<B2  forwardedRef={this.forwardedRef}/>
</div>
}
}
2.2 纯粹的⾼阶组件（Parent-Child）
【1】中并不是React组件，只是⼀个React组件为参数的函数，调⽤以后才成为React组件。那么直接写⼊⼀个Parent组件⼜该如何呢？import React from 'react'
import A from './a.jsx'
import PropTypes from 'prop-types';
function AasParent(props){
const ForWardedComponent = React.forwardRef((props, ref) => <div ref={ref}>
{props.children}
</div>);
return (
<A {...props}>
<ForWardedComponent  ref={props.forwardedRef} {...props}/>
</A>)
}
AasParent.propTypes = {
forwardedRef: PropTypes.object,
}
最后应⽤实例：
import React from 'react'
import ReactDOM from  'react-dom'
//假设AasParent存储于AasParent.jsx⽂件。注意与【1】中的区别
import AasParent  from  './AasParent.jsx'
const B=(props)=><h2>{ings}</h2>
class App extends React.Component {
constructor(props) {
super(props)
this.actRef()
}
render() {
return  <AasParent forwardedRef={this.forwardedRef}>
<B2  greetings="你好，Melo"/>
</AasParent>
}
}
三、总结
1.React.forwardRef的API中ref必须指向dom元素⽽不是React组件。
2.在【1】的组件A中，A的周期componentDidMount() 调⽤ this.props.forwardedRef.current ，指向的就是【1】中ForWardedComponent对应的dom元素。是【1】中B组件对应的dom的⽗dom元素，⽽不是该dom。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。