react 如何将子组件的值传给父组件

在React中，为了从子组件向父组件传递数据，通常有两种常见的方法：

1. **Props** (属性)：父组件通过props将数据作为属性传递给子组件。当子组件的状态或本地状态改变时，只需更新这个属性的值，父组件就会自动接收到更新并进行渲染。

   // 父组件
   function ParentComponent({ childValue }) {
     return (
       <ChildComponent value={childValue} />
     );
   }

   // 子组件
   function ChildComponent(props) {
     const [childState, setChildState] = useState('初始值');
     // 更新了子组件状态后，通过props回传给父组件
     function handleClick() {
       setChildState('新值');
       props.onChange(childState); // 或者使用 prop 的回调函数
     }
     return <button onClick={handleClick}>{childState}</button>;
   }

2. **Callback Refs** 和 `useRef` Hook：如果需要在特定时机由子组件主动触发父组件的方法，可以使用refs。首先在父组件创建一个ref，然后在子组件里设置它，并调用父组件的方法。

   // 父组件
   const parentRef = useRef(null);

   function ParentComponent() {
     // 子组件方法调用
     function handleChildUpdate(newValue) {
        // 更新这里
      }
      return (
        <ChildComponent ref={(child) => { parentRef.current = child; }}>
          {/* 子组件内容 */}
        </ChildComponent>
        <button onClick={() => parentRef.current.doSomething(handleChildUpdate)}>
          触发父方法
        </button>
      );
   }

   // 子组件
   function ChildComponent() {
     // ...
     // 当需要时，调用父组件传递的方法
     this.doSomething();
   }