React中如何跨组件传递useState实现登录注册模态框切换

当前写法无法生效的核心原因有两个：

• 你直接将完整JSX组件存储在state中，子组件Login根本访问不到Header组件内定义的setModal状态更新方法
• Login组件内部点击事件调用的setModal是未定义变量，和Header里的状态方法完全没有关联

不要把JSX组件直接存入state，改为存储模态框类型标识，将状态切换方法通过props传递给子组件即可，逻辑更清晰也更易维护。

修改Header组件 #

import React, { useState } from 'react';
import Login from "../modals/Login";
import Signup from "../modals/Signup";

export default function Header() {
    // 仅存储模态框类型标识，默认展示登录框
    const [modalType, setModalType] = useState('login');

    return (
        <>
            {/* 此处放Header其他原有内容 */}
            {modalType === 'login' && (
                <Login onSwitchToSignup={() => setModalType('signup')} />
            )}
            {modalType === 'signup' && (
                <Signup onSwitchToLogin={() => setModalType('login')} />
            )}
        </>
    )
}

修改Login组件 #

接收父组件传入的切换回调，绑定到注册按钮的点击事件上即可：

import React from 'react';

export default function Login({ onSwitchToSignup }) {
    return (
        <>
            {/* 此处放登录表单原有内容 */}
            <button onClick={onSwitchToSignup} className="btn btn-primary">
                Signup
            </button>
        </>
    )
}

如果注册模态框内需要加返回登录的按钮，同理给Signup组件接收onSwitchToLogin回调绑定点击事件就行。

注意：React官方不推荐将完整JSX组件直接存入state，state中只需要存最小粒度的状态值（比如这里的模态框类型字符串），渲染阶段再根据状态判断加载对应组件即可，能大幅降低组件间通信的复杂度。

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