Reactjs React：如何使用条件渲染和react 挂钩来更新另一个组件的状态

我还是个新手.我正在try 创建登录/注册屏幕.我有三个组件，分别称为Login、Register和SlidingCard.我在另一个名为Screen的JSX文件中呈现这些组件.在SlidingCard.jsx中，我有一个div，在这个div中有一些文本和按钮.当我点击按钮时，文本和按钮从注册相关的东西更改为登录相关的东西.现在我要说的是.我提到过，当我点击SlidingCard上的按钮时，文本会发生变化.但与那个点击，我想呈现的登录或注册.我该怎么做呢？

登录.jsx

import React from "react";
import Input from "./Input";

function Login() {
  return (
    <div className="loginContainer">
      <div className="loginChildContainer">
        <h1>Welcome Back!</h1>
        <p>Lorem lorem lorem lorem lorem</p>
        <Input type="text" placeholder="Username" />
        <Input type="password" placeholder="Password" />
        <button type="submit">Sign In</button>
      </div>
    </div>
  );
}

export default Login;

Register.jsx

import React from "react";
import Input from "./Input";
import FacebookIcon from "@mui/icons-material/Facebook";
import GoogleIcon from "@mui/icons-material/Google";
import TwitterIcon from "@mui/icons-material/Twitter";

function Register() {
  return (
    <div className="registerContainer">
      <h1>Create Account</h1>
      <button>
        <FacebookIcon />
      </button>
      <button>
        <GoogleIcon />
      </button>
      <button>
        <TwitterIcon />
      </button>
      <Input type="text" placeholder="Username" />
      <Input type="text" placeholder="email" />
      <Input type="password" placeholder="Password" />
      <button type="submit">Sign In</button>
    </div>
  );
}

export default Register;

SlidingCard.jsx

import React, { useState } from "react";

function SlidingCard() {
  const [isChanged, setChange] = useState(false);

  const loginPaheseTexts = {
    title: "Hello, Friend!",
    description: "Enter your personal details and start jurney 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 : loginPaheseTexts;

  function handleClick(event) {
    console.log(isChanged);

    setChange(!isChanged);
  }

  return (
    <div>
      <h1>{texts.title}</h1>
      <p>{texts.description}</p>
      <button onClick={handleClick}>{texts.button}</button>
    </div>
  );
}

export default SlidingCard;

Screen.jsx

import React from "react";
import Login from "./Login";
import Register from "./Register";
import SlidingCard from "./SlidingCard";

function Screen(props) {
  return (
    <div className="appContainer">
      {props.isChanged ? <Register /> : <Login />}
      <SlidingCard />
    </div>
  );
}

我查了实习生，但我找不到我要找的东西.