React中如何将父组件的点击事件传递给子组件

核心实现方式 #

React 中通过 props 传递函数是父子组件间共享逻辑的常规方式，针对你的需求，分两种常见场景给出实现：

场景1：父组件定义获取数据逻辑，传递给子组件调用 #

适合父组件统一管理数据请求逻辑，子组件只需触发该逻辑的场景。

父组件代码（修正后）

import { useState } from 'react';
import Child from './Child';

const Parent = () => {
  // 封装后端数据请求逻辑
  const handleClick = async () => {
    try {
      const res = await fetch('你的后端接口URL');
      const data = await res.json();
      console.log('获取到的数据:', data);
      // 可根据需求将数据存入state或做其他处理
    } catch (err) {
      console.error('请求失败:', err);
    }
  };

  return (
    <>
      {/* 父组件按钮直接触发请求 */}
      <button onClick={handleClick}>点击获取数据</button>
      {/* 将请求函数通过props传给子组件 */}
      <Child triggerFetch={handleClick} />
    </>
  );
};

export default Parent;

子组件代码（修正后）

子组件通过 props 接收父组件的函数，可在自身逻辑中调用：

const Child = ({ triggerFetch }) => {
  // 子组件内部触发父组件的请求函数
  const handleChildAction = () => {
    triggerFetch();
    alert('已触发数据请求');
  };

  return (
    <>
      <button onClick={handleChildAction}>子组件触发请求</button>
    </>
  );
};

export default Child;

场景2：父组件按钮触发子组件内部的函数 #

适合数据请求逻辑放在子组件内部，父组件仅需触发子组件方法的场景，需结合 useRef 和 forwardRef 实现。

父组件代码

import { useRef } from 'react';
import Child from './Child';

const Parent = () => {
  const childRef = useRef(null);

  const handleParentClick = () => {
    // 通过ref调用子组件暴露的方法
    if (childRef.current) {
      childRef.current.fetchData();
    }
  };

  return (
    <>
      <button onClick={handleParentClick}>父组件触发子组件请求</button>
      <Child ref={childRef} />
    </>
  );
};

export default Parent;

子组件代码

使用 forwardRef 暴露内部方法给父组件：

import { forwardRef, useImperativeHandle } from 'react';

const Child = forwardRef((props, ref) => {
  const fetchData = () => {
    alert('hello');
    // 子组件内部执行后端请求
    fetch('你的后端接口URL')
      .then(res => res.json())
      .then(data => console.log('子组件获取的数据:', data))
      .catch(err => console.error('请求失败:', err));
  };

  // 向父组件暴露指定方法
  useImperativeHandle(ref, () => ({
    fetchData
  }));

  return <></>;
});

export default Child;

代码错误修正说明 #

1. React 事件属性需用驼峰命名：onclick → onClick
2. 组件名必须首字母大写：parent → Parent、child → Child
3. 函数拼写修正：handlcklick → handleClick

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