React中点击父组件按钮时如何实现子向父组件传值？

以下是几种比你当前基于state触发useEffect更简洁高效的实现方案：

1. 使用 useRef 直接调用子组件方法 #

这是React父子组件间主动获取数据最直接的方式，无需额外state触发渲染，性能更优，逻辑也更清晰。

实现代码 #

父组件：

import { useRef } from 'react';

function ParentComponent() {
  const childRef = useRef(null);
  
  const handleGetChildData = () => {
    const childData = childRef.current?.getData();
    if (childData) {
      console.log(childData);
    }
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <div>ParentComponent</div>
      <button onClick={handleGetChildData}>Click Me</button>
    </>
  );
}

子组件：

import { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const data = {
    firstName: "John",
    lastName: "Smith",
  };

  // 向父组件暴露获取数据的方法
  useImperativeHandle(ref, () => ({
    getData: () => data
  }));

  return <div>ChildComponent</div>;
});

export default ChildComponent;

2. 状态提升（适用于数据可由父组件管理的场景） #

如果子组件的数据不需要仅由自身持有，可将数据状态直接提升到父组件，子组件通过props接收并使用数据。这种情况下父组件点击按钮时直接读取自身state即可，无需额外通信。

实现代码 #

父组件：

import { useState } from 'react';

function ParentComponent() {
  const [childData, setChildData] = useState({
    firstName: "John",
    lastName: "Smith",
  });
  
  const handleGetChildData = () => {
    console.log(childData);
  };

  return (
    <>
      <ChildComponent data={childData} />
      <div>ParentComponent</div>
      <button onClick={handleGetChildData}>Click Me</button>
    </>
  );
}

子组件：

function ChildComponent({ data }) {
  return <div>ChildComponent: {data.firstName} {data.lastName}</div>;
}

3. 使用 Context（适用于多层组件通信场景） #

如果组件层级较深，或需要多个组件共享子组件数据，可使用React Context实现数据共享。但对于简单的父子组件通信，这种方式略显冗余，更适合复杂场景。

方案对比 #

你当前的方案通过修改state触发子组件useEffect，会导致子组件每次state变化都重新渲染；而useRef方案不会触发额外渲染，性能更优，且代码直接体现“父组件主动获取子组件数据”的意图，逻辑更直观。

内容的提问来源于stack exchange，提问作者Abdulrahman