react登录注册功能

React是一个前端库，可以使用它来开发登录注册功能。下面是一个简单的示例：

首先，你需要安装React和相关库。可以使用以下命令：

npm install react react-dom react-router-dom

然后，你需要创建两个组件：Login和Register。这两个组件可以共享一个表单组件，例如LoginForm。LoginForm可以包含用户名、密码和提交按钮。

import React, { useState } from 'react';

function LoginForm(props) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    props.onSubmit({ username, password });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">{props.buttonText}</button>
    </form>
  );
}

function Login(props) {
  function handleSubmit(data) {
    console.log('Logging in with data:', data);
  }

  return (
    <div>
      <h1>Login</h1>
      <LoginForm onSubmit={handleSubmit} buttonText="Log in" />
    </div>
  );
}

function Register(props) {
  function handleSubmit(data) {
    console.log('Registering with data:', data);
  }

  return (
    <div>
      <h1>Register</h1>
      <LoginForm onSubmit={handleSubmit} buttonText="Register" />
    </div>
  );
}

export { Login, Register };

在上面的代码中，LoginForm组件包含了一个表单，用户输入用户名和密码并点击提交按钮，会调用onSubmit回调函数。Login和Register组件分别渲染LoginForm，并传递不同的onSubmit回调函数和按钮文本。

接下来，在App组件中使用Login和Register组件：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Login, Register } from './Auth';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/login">Login</Link>
          </li>
          <li>
            <Link to="/register">Register</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/register">
          <Register />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在上面的代码中，使用了react-router-dom库来实现路由。在导航栏中，用户可以选择登录或注册。当用户点击链接时，路由会切换到相应的组件。

这就是一个简单的React登录注册功能的实现。当然，实际的应用中可能会更加复杂，例如需要与后端API进行交互、进行表单验证等等。