React中onClick事件触发后无法渲染组件问题

你当前的写法错误在于：React组件的渲染依赖状态驱动，直接在onClick回调里写<signupCard />不会触发组件挂载。同时注意：React组件名必须大写开头，否则会被识别为普通HTML标签，这也是潜在问题。

正确实现步骤 #

1. 引入React的useState钩子，用于控制卡片的显示状态
2. 定义状态变量控制卡片显隐
3. 在点击事件中更新状态，触发组件重新渲染
4. 在JSX中根据状态条件渲染卡片

修改后的完整代码 #

import "./homePage.css";
// 组件名改为大写开头
import SignupCard from "../signupCard/signupCard"; 
import { motion } from "framer-motion";
// 引入useState
import { useState } from "react";

function Header() {
  // 定义状态，初始隐藏卡片
  const [showSignupCard, setShowSignupCard] = useState(false);

  return (
    <>
      <div className="header">
        <ul>
          <motion.li
            className="li__signup"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
            onClick={(e) => {
              e.preventDefault();
              // 更新状态，显示卡片
              setShowSignupCard(true);
            }}
          >
            Sign Up
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            Contact
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            About
          </motion.li>
        </ul>
      </div>
      <img src="../assets/image.png" alt="placeholder" />
      {/* 根据状态条件渲染卡片 */}
      {showSignupCard && <SignupCard />}
    </>
  );
}

export default Header;

关键说明 #

• 状态驱动渲染：React通过状态变化触发组件重新渲染，只有当状态更新时，条件渲染的JSX才会被挂载到DOM中
• 组件名规范：所有React组件必须大写开头，否则React会将其解析为原生HTML标签（比如<signupCard />会被当成<signupcard>标签，而不是自定义组件）
• 如果你需要关闭卡片，可以在SignupCard组件内部添加关闭按钮，调用setShowSignupCard(false)来更新状态

内容的提问来源于stack exchange，提问作者Harsh Darji