React登录/注册模态框渲染异常：点击均弹出同一组件求助

Hey there! It sounds like your Login and SignUp modals are stepping on each other’s toes—super common issue, and easy to fix once you know what’s going on. The problem almost always boils down to duplicate identifiers or shared state that’s causing both modals to point to the same instance. Let’s walk through the most likely fixes:

1. Duplicate Modal IDs (Most Common Culprit) #

If both your Login and SignUp components use the same id for their modal containers (like id="modal"), the browser will only recognize the last rendered instance of that ID. That’s why clicking either trigger opens the modal that was rendered second—it’s the only one the browser can find with that duplicate ID.

How to Fix It: #

Update each component to use a unique ID for their modal and corresponding trigger. Here’s an example of how to adjust your components:

In your Login component:

import React, { useState } from "react";

const Login = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Login</button>
      {isOpen && (
        <div id="login-modal" className="modal">
          {/* Your login form content here */}
          <button onClick={() => setIsOpen(false)}>Close Modal</button>
        </div>
      )}
    </>
  );
};

export default Login;

In your SignUp component:

import React, { useState } from "react";

const SignUp = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Sign Up</button>
      {isOpen && (
        <div id="signup-modal" className="modal">
          {/* Your sign-up form content here */}
          <button onClick={() => setIsOpen(false)}>Close Modal</button>
        </div>
      )}
    </>
  );
};

export default SignUp;

If you’re using a library like Bootstrap for modals, double-check that the data-bs-target on your trigger buttons matches the unique ID of the corresponding modal:

// Login trigger button
<button data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>

// Login modal container
<div className="modal fade" id="login-modal" aria-labelledby="login-modal-label">...</div>

2. Shared State Variable (If Using Parent-Controlled Modals) #

If you’re managing modal visibility from the Home component (instead of each modal handling its own state), using a single isModalOpen state for both modals will cause conflicts. Toggling that state would try to open both, but only the last rendered modal would be visible.

How to Fix It: #

Use separate state variables for each modal in your Home component, then pass those states down as props to the modal components:

Updated Home component:

import React, { useState } from "react";
import SignUp from "../SignUp";
import Login from "../Login";

const Home = () => {
  const [isLoginOpen, setIsLoginOpen] = useState(false);
  const [isSignUpOpen, setIsSignUpOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsLoginOpen(true)}>Open Login</button>
      <button onClick={() => setIsSignUpOpen(true)}>Open Sign Up</button>
      
      <Login isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
      <SignUp isOpen={isSignUpOpen} onClose={() => setIsSignUpOpen(false)} />
    </div>
  );
};

export default Home;

Updated Login component (accepting props):

const Login = ({ isOpen, onClose }) => {
  return (
    isOpen && (
      <div id="login-modal" className="modal">
        {/* Login form content */}
        <button onClick={onClose}>Close</button>
      </div>
    )
  );
};

3. Quick Debugging Check #

If you’re still stuck, open your browser’s dev tools:

• Inspect both modal elements to confirm their IDs are unique.
• Check the trigger buttons to ensure they’re targeting the correct modal ID.
• Verify that each modal has its own independent state (either within the component or via unique parent state variables).

内容的提问来源于stack exchange，提问作者Stacy Areas