react传递函数作为不带jsx的prop

// 父组件
function ParentComponent() {
  const [count, setCount] = React.useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <ChildComponent onIncrement={increment} />
    </div>
  );
}

// 子组件
function ChildComponent(props) {
  return (
    <button onClick={props.onIncrement}>Increment</button>
  );
}

// 确保函数已定义并传递
function ParentComponent() {
  const [count, setCount] = React.useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <ChildComponent onIncrement={increment} />
    </div>
  );
}

// 使用 useCallback 或 useMemo 保持函数引用稳定
function ParentComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onIncrement={increment} />
    </div>
  );
}