React函数组件与类组件双向通信及状态回传问题求助

问题场景 #

我对React不太熟悉，正在构建一个React 18应用：

• Home 是函数式主组件，包含一个触发按钮
• ImageDisplay 是类组件，负责发起异步后端调用（AWS Lambda）
• 已实现从Home到ImageDisplay的props传值，需要实现反向状态传递：当ImageDisplay发起异步请求时，通知Home将按钮设为禁用状态；请求完成后，通知Home重新启用按钮。

之前尝试Redux和Context方案未成功，现寻求可行方案。

核心解决方案：父组件传递回调函数给子组件 #

父子组件间的状态回传，最直接的方式是父组件定义状态更新函数，通过props传递给子组件，子组件在状态变化时调用该函数，同步父组件状态。无需复杂的状态管理库，适合这种简单的父子通信场景。

修改后的完整代码 #

Home 组件（函数组件）

import { useState } from "react";
import Button from '@mui/material/Button';
import ImageDisplay from "./ImageDisplay";

function Home() {
    const [isLoading, setIsLoading] = useState(false);
    const [isShow, setIsShow] = useState(false);
    const [prompt, setPrompt] = useState("your default prompt");

    // 供子组件调用的状态更新回调
    const handleLoadingChange = (loadingStatus) => {
        setIsLoading(loadingStatus);
    };

    return (
        <div>
            <Button
                disabled={isLoading}
                variant="contained"
                onClick={() => {
                    setIsShow(true);
                    setIsLoading(true); // 点击后立即禁用按钮
                }}>
                Generate with Bedrock
            </Button>
            <div>
                {isShow && <ImageDisplay prompt={prompt} onLoadingChange={handleLoadingChange} />}
            </div>
        </div>
    );
}

export default Home;

ImageDisplay 组件（类组件）

import React from "react";
import axios from "axios";

export default class ImageDisplay extends React.Component<{ prompt: string, onLoadingChange: (status: boolean) => void }> {

    componentDidMount() {
        // 请求开始，通知父组件进入加载状态
        this.props.onLoadingChange(true);

        axios.get('YOUR_AWS_LAMBDA_URL', {
            params: { prompt: this.props.prompt }
        })
        .then(response => {
            // 处理请求成功的逻辑，比如更新组件内状态
            // this.setState({ ... });
        })
        .catch(error => {
            console.error("请求失败:", error);
        })
        .finally(() => {
            // 请求完成（无论成败），通知父组件结束加载状态
            this.props.onLoadingChange(false);
        });
    }

    render() {
        return (
            <div>
                {/* 这里放置图片展示或其他UI内容 */}
                {this.props.isLoading ? "加载中..." : "加载完成"}
            </div>
        );
    }
}

关键说明 #

1. 回调函数传递：Home组件定义handleLoadingChange函数，通过onLoadingChange props传给ImageDisplay，子组件在异步请求的开始和结束阶段调用该函数，同步父组件的isLoading状态。
2. 按钮状态控制：点击按钮时立即设置isLoading为true，禁用按钮；异步请求完成（成功/失败）后，通过finally块调用回调恢复按钮可用状态。
3. 原Context方案问题：之前的Context使用存在逻辑错误——Home中用useContext初始化useState无效，且ImageDisplay内部重新定义Context Provider导致上下文层级混乱，对于简单父子通信，回调方案更简洁可靠。

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