react父子組件傳值之二，ref傳值(父組件調用子組件的值和方法) useRef+useImperativeHandle(hook)

父組件

import React, {
  useState,
  useRef,
} from 'react';
import Counter from './four';
import CounterTwo from './five';
export function Three(props) {
  // 獲取子組件實例
  const childRef = useRef();
  const childRefFive = useRef();
  const [fval, setFval] = useState()
  const [fourval, setFourval] = useState('我是你爸爸')
  // 調用子組件的onChange方法
  const onClickChange = () => {
    console.log('childRef', childRef)
    console.log('childRefFive', childRefFive)
    setFval(childRefFive.current.value)
    childRef.current.toparent(fourval);
    // childRef.current.onChange();
  };

  return (
    <div>
      <h2>父組件</h2>
      <div>{fval}</div>
      <button onClick={onClickChange}>我是子組件</button>
      <Counter ref={childRef} />
      <CounterTwo ref={childRefFive} />
    </div>
  );
}

Counter子組件

import React, {
  useState,
  useRef,
  useImperativeHandle,
  forwardRef,
} from 'react';
const Counter = forwardRef((props, ref) => {

  const [value, setValue] = useState("我是four子組件");
  // 自定義暴露給父組件的實例值 (useImperativeHandle 要配合 forwardRef使用)
  useImperativeHandle(ref, () => ({
    // 暴露函數給父組件調用
    value,
    toparent,
    // 也可以暴露子組件的狀態值給父組件使用
  }));
  const toparent = (val) => {
    console.log('value4', value, val)
    setValue(val)
  }
  return (
    <div>
      {value}
      {/* <button onClick={() => toparent()}>我是子組件</button> */}
      <button onClick={toparent}>我是four</button>
    </div>
  )
})
export default Counter

CounterTwo子組件

import React, {
  useState,
  useRef,
  useImperativeHandle,
  forwardRef,
} from 'react';
const Counter = forwardRef((props, ref) => {

  const [value, setValue] = useState("我是five子組件");
  // 自定義暴露給父組件的實例值 (useImperativeHandle 要配合 forwardRef使用)
  useImperativeHandle(ref, () => ({
    // 暴露函數給父組件調用
    value,
    toparent,
    // 也可以暴露子組件的狀態值給父組件使用
  }));
  const toparent = (val) => {
    console.log('value5', value, val)
  }
  return (
    <div>
      {value}
      {/* <button onClick={() => toparent()}>我是子組件</button> */}
      <button onClick={toparent}>我是four</button>
    </div>
  )
})
export default Counter

總結:父組件用useRef返回一個可變的 ref 對象,

子組件必須用useImperativeHandle 要配合 forwardRef使用