React中如何将父组件按钮的onClick事件传递给子组件？

核心逻辑不需要绕弯传递瞬时点击事件，本质是要让父组件能访问到子组件内部的图表实例、触发对应导出方法，以下是两种生产可用的实现方式：

方案1：ref暴露子组件方法（官方推荐，无额外开销） #

这是React官方推荐的跨组件调用内部方法的实现，没有多余的重渲染开销，逻辑和按钮放在子组件内完全一致，不会有时序问题。

注意：你原有代码里直接在函数组件作用域声明let chartInstance = new ChartComponent()、以及ref赋值的写法存在问题，函数组件每次重渲染都会重新执行作用域代码，会导致实例重复创建，以下代码已经修正了这些问题。

父组件 Component1 代码 #

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

const Component1 = () => {
    // 创建ref承接子组件暴露的方法
    const chartOperateRef = useRef(null);

    const handleExport = () => {
        // 直接调用子组件暴露的导出方法
        chartOperateRef.current?.handleExportPng();
    }

    return (
        <div>
            <button onClick={handleExport}>Export</button>
            <Component2 ref={chartOperateRef} />
        </div>
    )
}

export default Component1;

子组件 Component2 代码 #

import { useRef, forwardRef, useImperativeHandle } from 'react';
import { ChartComponent } from '@xyz/charts';

// 用forwardRef包裹组件接收父组件传入的ref
const Component2 = forwardRef((props, ref) => {
    // 用useRef存储图表实例，组件生命周期内仅会创建一次
    const chartInstance = useRef(null);

    // 仅向父组件暴露需要调用的方法，避免内部逻辑全量泄露
    useImperativeHandle(ref, () => ({
        handleExportPng: () => {
            chartInstance.current?.exportModule.export('PNG', 'image');
        }
    }), []);

    return (
        <ChartComponent
            id='chart1'
            // 正确挂载图表实例到ref
            ref={(instance) => chartInstance.current = instance}
        />
    )
})

export default Component2;

方案2：Props传触发信号（无ref场景兼容） #

如果项目里不允许跨组件用ref传方法，可以用一个递增的数字状态作为触发信号，子组件监听该状态变化执行导出。不要用布尔值做信号，连续点击相同布尔值不会触发组件更新。

父组件 Component1 代码 #

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

const Component1 = () => {
    // 导出触发计数器，初始值为0
    const [exportTrigger, setExportTrigger] = useState(0);

    const handleExport = () => {
        // 每次点击计数器+1，保证值一定会变化触发更新
        setExportTrigger(prev => prev + 1);
    }

    return (
        <div>
            <button onClick={handleExport}>Export</button>
            <Component2 exportTrigger={exportTrigger} />
        </div>
    )
}

export default Component1;

子组件 Component2 代码 #

import { useRef, useEffect } from 'react';
import { ChartComponent } from '@xyz/charts';

const Component2 = ({ exportTrigger }) => {
    const chartInstance = useRef(null);

    // 监听触发信号变化，执行导出
    useEffect(() => {
        // 跳过组件首次渲染的默认执行
        if (exportTrigger === 0) return;
        chartInstance.current?.exportModule.export('PNG', 'image');
    }, [exportTrigger]);

    return (
        <ChartComponent
            id='chart1'
            ref={(instance) => chartInstance.current = instance}
        />
    )
}

export default Component2;

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