Reactjs 在react 中单击父级中的按钮时如何将数据从子级发送到父级

我知道当一个按钮被点击时如何从子组件发送数据到父组件，但该按钮应该在子组件中. 我想要的是，当一个按钮被点击，但该按钮在父组件而不是子组件中时，如何从子组件发送数据到父组件.

例如，我有这样的东西:

父零部件

function ParentComponent() {
  const handleChildData = (childData) => {
    console.log(childData);
  }
  return (
    <> 
    <ChildComponent onDataGet={handleChildData} />
    <div>ParentComponent</div>
    </>
  )
}

子组件

function ChildComponent({onDataGet}) {
  const data = {
    firstName: "John",
    lastName: "Smith",
  }

  // Based on something, execute this function:
  onDataGet(data)

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

I have tried this approach:个

定义了一个状态，在每次点击时状态加一，也将这个状态传递给子组件，在那里只要状态发生变化，子组件中的useEffect就会发生，并执行onDataGet函数.就像这样:

父零部件

function ParentComponent() {
  const [isTrigerred, setIsTrigerred] = useState(1);
  const handleChildData = (childData) => {
    console.log(childData);
  };
  return (
    <>
      <ChildComponent onDataGet={handleChildData} gotChanged={isTrigerred} />
      <div>ParentComponent</div>
      <Button variant="contained" onClick={() => setIsTrigerred((prev) => prev + 1)}>
        Click Me
      </Button>
    </>
  );
}

子组件

function ChildComponent({ onDataGet, gotChanged}) {
  const data = {
    firstName: "John",
    lastName: "Smith",
  };

  useEffect(() => {
    // Don't execute in first render
    if (gotChanged !== 1) {
      onDataGet(data);
    }
  }, [gotChanged]);

  return <div>ChildComponent</div>;
}

但我正在寻找更好的方法，如果有的话.

谢谢.