React循环渲染子组件时OnClick事件异常问题求助

老哥，我太懂你这种踩坑的感觉了！咱们一步步来搞定这俩问题：

为什么渲染时onClick会自动执行？ #

你肯定是不小心把函数调用直接写进onClick里了，比如写成了 onClick={oh()} 或者 onClick={handleJump()}。React的onClick需要接收一个函数引用，如果你加了括号，组件渲染时就会立刻执行这个函数，而不是等点击的时候触发——这就是为啥刚渲染就跑，而且点击没反应（因为函数执行完返回的可能是undefined，相当于没绑定有效事件）。

怎么修复？ #

1. 修正onClick的写法 #

根据是否需要传参数，分两种情况：

• 不需要传参：直接传函数名（不要加括号）

<div onClick={handleJump}>博客标题</div>

• 需要传参（比如要跳转到对应博客的页面）：用箭头函数包裹，这样只有点击时才会执行内部逻辑

// 比如要传博客的跳转路径
<div onClick={() => handleJump(blog.url)}>{blog.title}</div>

2. 确保Card组件正确接收事件 #

如果是在List组件里把onClick传给Card，一定要注意props的传递方式：
List组件里循环渲染Card时：

{blogs.map(blog => (
  <Card 
    key={blog.id} 
    title={blog.title} 
    // 用箭头函数包裹，把当前博客的跳转信息传进去
    onTitleClick={() => handleJump(blog.url)} 
  />
))}

然后在Card.js里，把这个事件绑定到对应的div上：

function Card({ title, onTitleClick }) {
  return (
    // 直接传函数引用，不要加括号！
    <div onClick={onTitleClick} style={{ cursor: 'pointer' }}>
      {title}
    </div>
  );
}

3. 页面跳转的实现（以React Router为例） #

如果你的项目用了React Router，用useNavigate钩子就能轻松实现跳转：

import { useNavigate } from 'react-router-dom';

function List() {
  const navigate = useNavigate();
  
  // 定义跳转函数
  const handleJump = (blogUrl) => {
    navigate(blogUrl); // 比如跳转到 `/blogs/${blog.id}`
  };

  // ... 其他渲染逻辑
}

小建议：函数命名规范 #

你提到oh函数命名不规范，建议改成更有语义的名字，比如renderBlogCards或者mapBlogsToCards，这样后续自己维护或者别人看代码都能一眼懂~

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