forwardRef? 暴露dom節點

作用：使用ref暴露DOM節點給父組件

案例

例如在父組件中想要獲取子組件input的輸入值，和讓input獲取焦點

?父組件

import { Button } from 'antd-mobile'
import Son from "./components/son";
import { useState,useRef } from "react";
const Year = () => {const inputRef = useRef(null)const getinputRef =()=>{console.log(inputRef);console.log(inputRef.current.value);    //子組件的輸入內容inputRef.current.focus() //獲取焦點}return (<div>父組件<Son ref={inputRef}></Son><div className="purple-theme"><Button color="primary" onClick={getinputRef}>按鈕</Button></div></div>);
};
export default Year;

子組件

import { forwardRef } from "react";
const Son = forwardRef((props,ref) => {console.log('我是子組件'); return (<div>我是子組件<input type="text" ref={ref}></input></div>);
})
export default Son;

useImperativeHandle 暴露子組件方法

作用：使用ref暴露子組件中的方法

案例

父組件通過ref調用子組件內部的focus方法實現使input獲取焦點

子組件

import { forwardRef,useImperativeHandle,useRef } from "react";
import { Button } from 'antd-mobile'
const Son = forwardRef((props,ref) => {console.log('我是子組件'); const inputRef = useRef(null)//聚焦方法const FocusInput = ()=>{console.log(inputRef);inputRef.current.focus()}// 把子組件方法暴露出去useImperativeHandle(ref,()=>{return {FocusInput}})return (<div>我是子組件<input type="text" ref={inputRef}></input></div>);
})
export default Son;

父組件

import { Button } from 'antd-mobile'
import Son from "./components/son";
import { useState,useRef } from "react";
const Year = () => {const SonRef = useRef(null) //調用子組件暴露的方法const getinputRef =()=>{SonRef.current.getinputRef()}return (<div>父組件<Son ref={SonRef}></Son><div className="purple-theme"><Button color="primary" onClick={getinputRef}>按鈕</Button></div></div>);
};
export default Year;