React：如何通过条件渲染与Hooks实现跨组件状态更新切换登录注册

核心思路 #

把状态提升到父组件Screen统一管理，因为子组件SlidingCard的操作需要影响父组件的渲染逻辑。通过props将状态和状态修改方法传递给SlidingCard，实现父子组件的状态同步。

具体修改步骤 #

1. 改造Screen组件

将状态移到Screen中，管理登录/注册的切换状态，并定义切换方法传递给SlidingCard：

import React, { useState } from "react";
import Login from "./Login";
import Register from "./Register";
import SlidingCard from "./SlidingCard";

function Screen() {
  // 父组件管理切换状态
  const [isChanged, setIsChanged] = useState(false);

  // 定义状态切换方法
  const handleToggle = () => {
    setIsChanged(!isChanged);
  };

  return (
    <div className="appContainer">
      {/* 根据状态切换登录/注册组件 */}
      {isChanged ? <Register /> : <Login />}
      {/* 传递状态和切换方法给SlidingCard */}
      <SlidingCard isChanged={isChanged} onToggle={handleToggle} />
    </div>
  );
}

export default Screen;

2. 修改SlidingCard组件

移除组件内部的状态，改用父组件传递的状态和方法：

import React from "react";

// 通过props接收父组件的状态和方法
function SlidingCard({ isChanged, onToggle }) {
  const loginPhaseTexts = {
    title: "Hello, Friend!",
    description: "Enter your personal details and start journey with us.",
    button: "Sign Up"
  };

  const registerPhaseTexts = {
    title: "Welcome Back",
    description: "To keep connecting with us please login with your personal info.",
    button: "Sign In"
  };

  // 根据父组件传递的状态选择文本
  const texts = isChanged ? registerPhaseTexts : loginPhaseTexts;

  return (
    <div>
      <h1>{texts.title}</h1>
      <p>{texts.description}</p>
      {/* 点击按钮时调用父组件的切换方法 */}
      <button onClick={onToggle}>{texts.button}</button>
    </div>
  );
}

export default SlidingCard;

3. 保持Login和Register组件不变

原有的Login.jsx和Register.jsx无需修改，它们只负责自身的UI渲染。

效果说明 #

修改完成后，点击SlidingCard内的按钮时，会触发父组件的状态更新：

• Screen组件会根据新状态自动切换渲染Login或Register组件
• SlidingCard的文本内容也会同步更新，实现了UI的统一联动

内容的提问来源于stack exchange，提问作者Görkem Tandoğan