React Hook父組件獲取子組件的數據/函數

咱們知道在react中，經常使用props實現子組件數據到父組件的傳遞，可是父組件調用子組件的功能卻不經常使用。文檔上說ref其實不是最佳的選擇，可是想着偷懶不學redux，在網上找了不少教程，要不就是hook的講的太少，要不就是父子組件傻傻分不清，因而只好再啃了一下文檔，就學了一下其它hook的api。
在這裏咱們須要用到useImperativeHandle這個api，其函數形式爲

useImperativeHandle(ref, createHandle, [deps])

其實這個api也是ref的一種形式，可是至關於作了必定的優化，能夠選擇讓子組件只暴露必定的api給父組件，根據在文檔和其餘博客上給出的方法，一共有兩大步驟：

1. 將ref傳遞到子組件中
2. 須要使用forwardRef對子組件進行包裝

子組件MyWorldMap

const mapRef = useRef(null);
    useImperativeHandle(ref, () => {

        return {
            //clickSwitch是子組件暴露的函數
            clickSwitch() {
             
                if(type == 1){
                    initChinaMap();
                    setType(2);
                }else{
                    initWordMap();
                    setType(1);
                }
              
            }
        }
    })

//你的return內容，注意ref

    return(
        <React.Fragment>

            <div id={"myWorldMap"} style={{ width: "800px", height: "400px" }}  ref={mapRef}></div>

        </React.Fragment>


    )
}


//最後要配合forwardRef
MyWorldMap = forwardRef(MyWorldMap);
export default MyWorldMap;

注：ref是子組件聲明的時候傳進來的，也就是

function MyWorldMap (props,ref){
//..你的代碼
}

//export...

其實官方文檔給出來的例子是：

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

兩種方法都是能夠的

父組件MyTrip

const myWordMapRef = useRef();

return(
  //省略一些代碼，注意ref
 <MyWorldMap proData = { myMapData} handleMapClick = {handleMapClick.bind(this)} ref={myWordMapRef}>

 </MyWorldMap>
<div className={styles["mapButton-wrap"]}>
       <ButtonGroup>
               <Button onClick={() => myWordMapRef.current.clickSwitch()}>Switch</Button>
               <Button onClick={()=>clickAll() }>All</Button>
        </ButtonGroup>
 </div>
)

如今你就能夠在父組件裏面經過myWordMapRef.current.clickSwitch()調用函數了