如何将 prop 表单子组件发送到父组件...？

Question

我有一个布局，其中子元素用于获取所有组件，我想将状态作为道具发送到导航栏，以便动态更改导航栏..

如果我不使用 {children} 并直接调用它就可以了。但我想方便地使用这种格式。所以请解决问题谢谢...下面是我的三个 jsx 文件或组件

const Layout = ({ children}) => {

  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  return (
    <>
      <Navbar isLoggedIn={isLoggedIn} handleLogin={handleLogin} />
      <div>{children}</div>
      <Footer />
    </>
  );
};

export default Layout;

const Login = () => {

  const handleLogin = () => {};

  return (

    <Layout >     
      <LoginForm handleLogin={handleLogin} />
    </Layout>

  );
};

export default Login;

`

const NavbarMain = ({isLoggedIn, handleLogout}) => {
    const [navbarColor, setNavbarColor] = React.useState("navbar-transparent");
    const [navbarCollapse, setNavbarCollapse] = React.useState(false);

    const toggleNavbarCollapse = () => {
        setNavbarCollapse(!navbarCollapse);
        document.documentElement.classList.toggle("nav-open");
    };

    React.useEffect(() => {
        console.log("isLoggedIn:", isLoggedIn);
    }, [isLoggedIn]);
remaining code...

const LoginForm = ({handleLogin}) => {

    const navigate = useNavigate();

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await axios.post('http://localhost:3001/login', {
                email,
                password
            });
            console.log(response.data);
            if (response.status === 200) {
                localStorage.setItem('session', response.data.session);
                navigate('/')
                handleLogin(); 

            } else {
                setError("An unexpected error occurred. Please try again later.");
            }
        } catch (error) {
            if (error.response && error.response.data && error.response.data.error) {
                setError(error.response.data.error);
            } else {
                setError("An unexpected error occurred. Please try again later.");
            }
        }
    };

Answer 1

在这种情况下使用 React Context：

• https://react.dev/reference/react/createContext
• https://react.dev/reference/react/useContext

或任何状态管理器（例如 Redux）在不同树级别的组件之间共享状态