react小知识，在使用react hooks时父组件调用子组件的方法

一、思路

清楚ref的原理，然后模拟ref，给子组件传递callRef,然后子组件通过callRef把方法传递给父组件。

二、代码实现

需要实现的功能：header调用menu,除了menu本身可以控制menu的开关，header也要控制menu的开关

1.子组件menu

 import React, { useEffect, useState } from 'react';
 
 export default function Menu(){
    const { callRef } = props; //父组件传递的callRef
    const [isShow, setIsShow] = useState(false); //isShow：控制是否展开的变量，setIsShow：改变变量的方法（这个就是父组件需要调用的方法）
    useEffect(() => { //重点，通过useEffect在组件初始时将子组件的方法传递给父组件
      if (callRef) {
        callRef(setIsShow);
      }
    }, [callRef]);//防止多次不必要的渲染，只有在callRef发生改变时才会引起变化
  return (
   <div styleName={`menu-root ${isShow ? 'isOpen' : ''}`} >
   ... ...
   </div>
  )
 }

2.父组件header调用

import React, { useEffect, useState } from 'react';
import Menu from '../Menu'; //子组件的路径
  
 export default function Header(){
  let handleChangeMenuStatus = () => {};//1.先定义变量的初始值
  return (
      <div styleName="header-root">
        <i className="kolicon kol-icon-menu1" onClick={() => handleChangeMenuStatus(true)}></i>
        {/* 3.引用该变量方法，就等价于子组件调用的改变isShow变量的方法） */}
        <Menu callRef={(c) => { handleChangeMenuStatus = c; }}/> 
        {/* 2.将子组件返回的方法赋值给变量 */}
      </div>
  )
 }

三、总结

总结就是，雷同ref的处理，子组件可以直接把方法传递给父组件，父组件就可以很方便的使用。 另外，如果不是函数形式的react组件，而是class类型的组件也可以如此处理，更可以将子组件的this传递给父组件，父组件就可以通过子组件传的的this调用子组件的更多方法了。