React点击元素无响应：无法显示ProjectCart问题求助

核心问题1：ProjectCard组件的props接收方式错误 #

你的ProjectCard组件参数写法有误，React函数组件的所有props都在第一个参数对象里，你把props作为第二个参数，实际上第二个参数是组件上下文（仅关联useContext场景），因此根本拿不到传入的showProject方法。

错误写法：

export const ProjectCard = ({ title, description, imgUrl }, props) => {
  // ...
};

正确写法二选一：

• 直接解构目标props：

export const ProjectCard = ({ title, description, imgUrl, showProject }) => {
  return (
    <Col size={12} sm={5} md={4}>
      <div className="proj-imgbx" onClick={showProject}>
        <img src={imgUrl} />
        <div className="proj-txtx">
          <h4>{title}</h4>
          <span>{description}</span>
        </div>
      </div>
    </Col>
  );
};

• 保留完整props对象：

export const ProjectCard = (props) => {
  return (
    <Col size={12} sm={5} md={4}>
      <div className="proj-imgbx" onClick={props.showProject}>
        <img src={props.imgUrl} />
        <div className="proj-txtx">
          <h4>{props.title}</h4>
          <span>{props.description}</span>
        </div>
      </div>
    </Col>
  );
};

核心问题2：Projects组件未正确接收props #

你的Projects组件代码片段直接使用props.onshowProject，但如果是函数组件，必须先声明接收props参数，否则会抛出props is undefined错误。

修正后的Projects组件示例：

const Projects = (props) => { // 必须显式接收props参数
  return (
    <Row>
      {projects.map((project, index) => {
        return (
          <ProjectCard
            key={index}
            {...project}
            showProject={props.onshowProject}
          />
        );
      })}
    </Row>
  );
};

次要优化点 #

• App组件里的< ProjectCart />存在多余空格，修正为<ProjectCart onClose={hidePojectHandler}/>，避免潜在渲染问题。
• 函数名hidePojectHandler拼写有误（应为hideProjectHandler），虽不影响功能，但建议修正以保持代码一致性。

内容的提问来源于stack exchange，提问作者Zakaria Zhlat