React钩子:父函数如何访问子函数的状态:如果按钮点击，父应用程序读取子函数的状态

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

const ChildComponent = () => {
  const [childState, setChildState] = useState(false);
  const childStateRef = useRef(childState);

  const updateChildState = (newState) => {
    setChildState(newState);
    childStateRef.current = newState;
  };

  return (
    <div>
      <button onClick={() => updateChildState(!childState)}>Toggle Child State</button>
    </div>
  );
};

export default ChildComponent;

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

const ParentComponent = () => {
  const childStateRef = useRef(false);

  useEffect(() => {
    // 在子组件状态变化时执行相应的操作
    console.log('Child state changed:', childStateRef.current);
  }, [childStateRef.current]);

  return (
    <div>
      <ChildComponent ref={childStateRef} />
    </div>
  );
};

export default ParentComponent;