如何在React中实现ShowAccount与EditAccount两个组件的切换功能

核心思路 #

用React内置的useState钩子维护编辑状态，通过状态值控制两个组件的条件渲染即可。

1. 修改Toggle组件代码 #

替换你原来的Toggle组件代码为如下实现：

import React, { useState } from 'react';
import EditAccount from './editacc';
import ShowAccount from './showacc';

const Toggle = () => {
    // 定义状态：isEditing为false时默认展示查看组件，true时展示编辑组件
    const [isEditing, setIsEditing] = useState(false);

    return(
        <>  
            {/* 切换按钮，可根据当前状态修改按钮文字 */}
            <button onClick={() => setIsEditing(!isEditing)}>
                {isEditing ? '返回查看账户' : '编辑账户'}
            </button>
            {/* 条件渲染对应组件 */}
            {isEditing ? <EditAccount /> : <ShowAccount />}
        </>
    );
};

export default Toggle;

2. 可选扩展：子组件内触发切换 #

如果需要在EditAccount组件内部完成操作后自动切回查看组件，可以把状态更新方法作为props传入：

// Toggle组件内渲染EditAccount时传参
{isEditing ? <EditAccount onSaveSuccess={() => setIsEditing(false)} /> : <ShowAccount />}

在EditAccount的保存成功逻辑里调用props.onSaveSuccess()即可触发切换。

3. 现有代码适配 #

你提供的Myaccount组件（Index.js）不需要做任何修改，直接使用即可正常运行。

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