函数组件 + 回调 ref

import React, { useState, useRef, useEffect } from "react";

const Child = (props) => {
  const [count, setCount] = useState(0);

  // 暴露方法
  useEffect(() => {
    if (props.bindRef) {
      props.bindRef({
        increment: () => setCount((c) => c + 1),
        reset: () => setCount(0),
        getValue: () => count,
      });
    }
  }, [props.bindRef, count]);

  return (
    <div style={{ border: "1px solid #ccc", padding: 16 }}>
      <p>子组件计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>子组件 +1</button>
    </div>
  );
};

const Parent = () => {
  const childApi = useRef(null);

  const handleReset = () => {
    childApi.current?.reset();
  };

  const handleIncrement = () => {
    childApi.current?.increment();
  };

  const handleGetValue = () => {
    alert(`当前子组件 count 值为：${childApi.current?.getValue()}`);
  };

  return (
    <div style={{ padding: 20 }}>
      <h2>父组件</h2>
      <div style={{ marginBottom: 10 }}>
        <button onClick={handleIncrement}>父组件调用 +1</button>{" "}
        <button onClick={handleReset}>父组件调用 reset()</button>{" "}
        <button onClick={handleGetValue}>获取子组件值</button>
      </div>
      <Child bindRef={(api) => (childApi.current = api)} />
    </div>
  );
};

export default Parent;