尝试实现条件内容渲染，正文中有更多细节

Question

我正在从底部的代码生成登录状态。然后我将生成的状态（true 或 false）提升到父组件（App.js 文件），然后我尝试实现条件渲染，但它不起作用。有什么帮助吗？我附上了下面的文件。我的网站仍然显示登录页面并且从不呈现我正在尝试呈现的其他条件内容

App.js 文件

import "./App.css";
import LoginPage from "./Login/LoginPage";
import NewPost from "./Posts/NewPost";
import Posts from "./Posts/Posts";
import PostList from "./Posts/PostList";
import { useState } from "react";

const expenses = [
  {
    name: "Lakshay Gupta",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "5mins ago",
    comments: "16 comments",
  },
  {
    name: "Naman Sukhija",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "1hour ago",
    comments: "24 comments",
  },
  {
    name: "William Harris",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "3mins ago",
    comments: "29 comments",
  },
];

function App() {
  let loggedIn = false;

  const submitLoginHandler = (ifLoggedIn) => {
    loggedIn= ifLoggedIn;
    console.log(loggedIn);

  };

  return (
    <div className="App">
      {!loggedIn ? (
        <LoginPage onSubmitLogin={submitLoginHandler}></LoginPage>
      ) : (
        <div>
          <NewPost></NewPost>
          <PostList items={expenses}></PostList>{" "}
        </div>
      )}
    </div>
  );
}

export default App;

LoginPage.js 文件

import React from "react";
import "./LoginPage.css";
import { useState } from "react";

export default function LoginPage(props) {

  const [loggedIn, setLoggedIn] = useState(false);

  const loginHandler = (e) => {
    e.preventDefault();
     setLoggedIn(true);
     props.onSubmitLogin(loggedIn);
  }
  return (
    <div>
      <form className="form-dimensions">
          <div className="mb-4 custom-heading">
              WELCOME BACK
          </div>
          <div className="mb-4 custom-subheading">
              Login into your account
          </div>
        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label email-custom form-color">
            Email or Username
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            placeholder="Enter your email or username"
          />
          
        </div>
        <div className="mb-3">
            <div className="label-inline">
          <label htmlFor="exampleInputPassword1" className="form-label form-color password-custom label-inline">
            Password                                     
          </label>
          <label htmlFor="exampleInputPassword2" className="forgot-password-custom form-label form-color label-inline">
              Forgot password?
          </label>
            </div>
          
          
          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Enter your password"
          />
        </div>
        
        <button type="submit" className="btn btn-primary" onClick={loginHandler} >
          Login now
        </button>
        <div className="custom-ending">
            Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

Answer 1

您需要在 App 中使用 State 而不是 LoginPage.js。

因为state更新了就会得到。如果值按照您定义的方式更改，React 不会重新呈现。

所以你应该在点击登录按钮时发送登录状态（true），然后在应用程序中你得到它并将它解析为App.js的状态。

LoginPage.jsx

import React from "react";
import { useState } from "react";

export default function LoginPage(props) {
  const loginHandler = () => {
    props.onSubmitLogin(true);
  };
  return (
    <div>
      <form className="form-dimensions">
        <div className="mb-4 custom-heading">WELCOME BACK</div>
        <div className="mb-4 custom-subheading">Login into your account</div>
        <div className="mb-3">
          <label
            htmlFor="exampleInputEmail1"
            className="form-label email-custom form-color"
          >
            Email or Username
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            placeholder="Enter your email or username"
          />
        </div>
        <div className="mb-3">
          <div className="label-inline">
            <label
              htmlFor="exampleInputPassword1"
              className="form-label form-color password-custom label-inline"
            >
              Password
            </label>
            <label
              htmlFor="exampleInputPassword2"
              className="forgot-password-custom form-label form-color label-inline"
            >
              Forgot password?
            </label>
          </div>

          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Enter your password"
          />
        </div>

        <button
          type="submit"
          className="btn btn-primary"
          onClick={loginHandler}
        >
          Login now
        </button>
        <div className="custom-ending">
          Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

和app.js

import LoginPage from "./LoginPage";
import { useState } from "react";

const expenses = [
  {
    name: "Lakshay Gupta",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "5mins ago",
    comments: "16 comments"
  },
  {
    name: "Naman Sukhija",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "1hour ago",
    comments: "24 comments"
  },
  {
    name: "William Harris",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "3mins ago",
    comments: "29 comments"
  }
];

function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const submitLoginHandler = (e) => {
    setLoggedIn(e);
    console.log(e);
  };

  return (
    <div className="App">
      {!loggedIn ? (
        <LoginPage onSubmitLogin={submitLoginHandler} />
      ) : (
        <div>Post to show</div>
      )}
    </div>
  );
}

export default App;

您可以在此处查看完整答案：https://codesandbox.io/s/clever-hermann-83048s

希望对您有所帮助！

尝试实现条件内容渲染，正文中有更多细节

Trying to implement conditional content rendering, more details in the body

javascript

frontend

reactjs