如何更改React.js中的页面

Question

我正在学习 React.js 并且正在创建一个演示。

我创建了一个登录页面。现在我想开发这样的功能：如果我使用管理员的凭据，那么我应该将当前页面布局更改为员工列表。如果我使用员工的凭据，那么我应该更改页面以显示该员工的详细信息。

目前无法正确登录后打印内容。

应用程序.js

import { useState } from 'react';

import './App.css';
import USER_DATA from './userData';
import AdminPage from './components/Admin';
import EmployeePage from './components/Employee';

function App() {
  let [userEmail, setEmail] = useState('[email protected]'),
    [userPassword, setPassword] = useState('password');

  function handleEmail(event) {
    setEmail(event.target.value);
  }

  function handlePassword(event) {
    setPassword(event.target.value);
  }

  function handleLogin(email, password) {
    for (let user of USER_DATA) {
      if (user.userEmail === email) {
        if (user.password === password) {
          if (user.isAdmin) return <AdminPage />;
          else return <EmployeePage />;
        } else {
          console.log('Password not matched ..... ');
        }
      } else {
        console.log('Email not matched ..... ');
      }
    }
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <p className='P'>Welcome there!</p>
        <div
          id='input-div'
          style={{
            display: 'flex',
            flexDirection: 'column',
            margin: '20px',
            alignContent: 'left',
          }}
        >
          <label>Email</label>
          <input
            type='email'
            id='email'
            onChange={handleEmail}
            placeholder={userEmail}
            // value={userEmail}
            required
          />
          <label>Password</label>
          <input
            type='password'
            id='password'
            onChange={handlePassword}
            // value={userPassword}
            placeholder={userPassword}
            required
          />
        </div>

        <div style={{ display: 'flex', margin: '10px' }}>
          <button
            className='Button'
            onClick={() => handleLogin(userEmail, userPassword)}
          >
            Login
          </button>
          <button className='Button'>Registration</button>
        </div>
      </header>
    </div>
  );
}

export default App;

用户数据.js

const userData = [
  {
    userId: 1,
    userEmail: '[email protected]',
    password: 'password',
    isAdmin: true,
  },
];

export default userData;

管理.jsx

export default function AdminPage() {
  return (
    <>
      <p>Admin Login</p>
    </>
  );
}

提前感谢您。

Answer 1

这里有一些事情，首先，您从handleLogin 函数返回组件，您从onClick 按钮调用该函数，因此您不会在页面中看到任何更改。我强烈建议您查看 React router，这样您就可以创建两个不同的页面，您可以通过 onClick 操作（handleLogin 函数）将用户重定向到，在每个页面中您将呈现组件（AdminPage 和 EmployeePage />）。

如果您还不想深入研究 React Router，那么重要的是您知道您永远不会在按钮的 onClick 回调中返回 JSX 组件，您可以做的是创建另一个名为

isAdminUser

的状态值，您可以在 onClick 回调函数中设置它（在您的情况下为 handlerLogin，以及返回组件的确切位置），然后声明一个新变量可能称为“componentToRender”，并根据

isUser

状态变量是否为 true 或false，然后在组件中渲染该常量，例如 标题下方的 {componentToRender}，componentToRender 示例：

const componentToRender = useMemo(() => isAdminUser ? <AdminPage /> : <EmployeePage />, [isAdminUser])

....
</Header>
{componentToRender}
....