单击注册按钮时打开新组件

import React, { useState } from 'react';

const App = () => {
  const [showRegisterModal, setShowRegisterModal] = useState(false);

  const handleRegisterClick = () => {
    setShowRegisterModal(true);
  };

  const handleCloseModal = () => {
    setShowRegisterModal(false);
  };

  return (
    <div>
      <button onClick={handleRegisterClick}>注册</button>
      {showRegisterModal && (
        <div className="modal">
          <div className="modal-content">
            <span className="close" onClick={handleCloseModal}>&times;</span>
            <h2>注册</h2>
            <form>
              <label>用户名:</label>
              <input type="text" />
              <label>密码:</label>
              <input type="password" />
              <button type="submit">提交</button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;