虽然这并不符合React的设计原则，也就是声明式编程，但是有些傻逼面试官还是会问你怎么调用，所以也得总结一下。 类组件：React.createRef()、props传递方法，得到子组件的this 函数组件：useImperativeHandle
类组件
React.createRef()
class Super extends Component {
constructor(props){
super(props);
this.sub = React.createRef();
}
handleClick(){
this.sub.click();
}
render(){
return(
<>
<div onClick={this.handleClick}>点击</div>
<Sub ref={this.sub}/>
</>
)
}
}
class Sub extends Component{
click(){
console.log('click')
}
render(){
return (<div>子组件</div>)
}
}
优点：通俗易懂，用ref指向 缺点：使用了HOC的子组件不可用，比如mobx的@observer包裹的子组件
ref的函数式声明
<Sub ref={ref=>this.sub=ref}/>
其他的跟上面的一样，只是定义ref的方式不同
使用props自定义的onRef属性
class Super extends Component {
handleClick(){
this.sub.click();
}
render(){
return (
<>
<div onClick={this.handleClick}>点击</div>
<Sub onRef={node=>this.sub=node}/>
</>
)
}
}
@observer
class Sub extends Component{
componentDidMount(){
this.props.onRef&&this.props.onRef(this)
}
click(){
console.log('click')
}
render(){
return (<div>子组件</div>)
}
}
onRef也可以换成其他名字，总归是父组件传给子组件的方法，目的是为了拿到this 优点：就算子组件嵌套了HOC，也可以指向真实的子组件
函数组件
useImperativeHandle
const Super = () => {
const subRef = useRef();
const handleClick = () => {
subRef.current.click();
}
return (
<>
<div onClick={this.handleClick}>点击</div>
<Sub onRef={subRef}/>
</>
)
}
const Sub = (props) => {
const click = () => {
console.log('click')
}
useImperativeHandle(props.onRef,() => {
return {
click:click
}
})
return (
<div>子组件</div>
)
}
优点：假如子组件嵌套HOC，也能指向真实的子组件
