useImperativeHandle中的递归函数

import React, { useRef, useImperativeHandle } from 'react';

const RecursiveComponent = React.forwardRef((props, ref) => {
  const recursiveFunction = (num) => {
    if (num <= 0) {
      return 0; // 终止条件
    }
    return num + recursiveFunction(num - 1); // 递归调用
  };

  useImperativeHandle(ref, () => ({
    recursiveFunction, // 暴露递归函数给父组件
  }));

  return <div>Recursive Component</div>;
});

export default RecursiveComponent;

import React, { useRef } from 'react';
import RecursiveComponent from './RecursiveComponent';

const ParentComponent = () => {
  const recursiveRef = useRef();

  const handleClick = () => {
    const result = recursiveRef.current.recursiveFunction(5); // 调用递归函数
    console.log(result); // 输出15
  };

  return (
    <div>
      <button onClick={handleClick}>Call Recursive Function</button>
      <RecursiveComponent ref={recursiveRef} />
    </div>
  );
};

export default ParentComponent;