React中如何通过外部子组件控制父组件状态实现登录切换

你现在的写法有两个核心的React概念理解错误：

• 对useState的使用规则理解有误：useState返回的状态变量是只读的，直接写state = !state属于普通变量赋值，React完全感知不到这个变化，不会触发组件重渲染，视图永远不会更新。所有状态修改必须通过useState返回的setState派发函数执行，这是React状态更新的硬性规则。
• 对React单向数据流规则理解有误：状态定义在父组件Main中时，只有Main组件本身有权直接修改这个状态。子组件LoginButton无法直接访问、修改父组件的内部状态，跨组件的状态触发必须通过props传递回调的方式实现。

另外你写的LoginButton组件里用了class属性，JSX中需要替换为className，否则样式不会正常生效。

第一步：修正父组件逻辑 #

父组件中把状态更新逻辑写对，同时把点击回调通过props传给LoginButton子组件：

function Main() {
    const [showLoginForm, setShowLoginForm] = useState(false);
    // 正确的状态更新写法，用函数式更新避免闭包导致的状态值陈旧问题
    const handleLoginEntryClick = () => {
        setShowLoginForm(prev => !prev);
    }

    return (
        <div id='main'>
            <p id='main-body'>{lorem}</p>
            {/* 把回调作为prop传给子组件 */}
            { showLoginForm ? <LoginForm /> : <LoginButton onLoginClick={handleLoginEntryClick} />}
        </div>
    )
}

这里把原来含义模糊的state变量名改成showLoginForm，可读性更强，实际开发中不建议用无意义的state作为状态名。

第二步：修正子组件逻辑 #

子组件接收父组件传入的props，把按钮的点击事件绑定到传入的回调上，同时修正class为className：

function LoginButton(props) {
    return (
        <div className="btn-centered">
            <button 
                type="button" 
                className="btn btn-outline-primary btn-lg btn-centered" 
                onClick={props.onLoginClick}
            >
                Login
            </button>
        </div>
    )
}

• React的视图更新是状态驱动的：只有当你调用React官方提供的状态更新函数（比如useState返回的setter、useReducer的dispatch）时，React才会标记组件需要重渲染，重新执行组件函数计算最新的视图结构。直接给普通变量/状态变量赋值，不会触发这个更新流程，页面自然不会有变化。
• 单向数据流是React的核心设计：所有数据都是自顶向下从父组件通过props流向子组件的，子组件永远不能直接修改父组件传入的props或者父组件的内部状态。如果子组件需要触发父组件的状态变更，父组件需要提前把"修改状态的方法"通过props传给子组件，子组件在合适的时机调用这个方法，本质上状态修改的逻辑还是执行在父组件内部，子组件只是起到了触发通知的作用。这种设计能最大程度避免状态混乱，方便定位状态变更的来源。

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