React函数式组件中Div的onClick事件无法正常触发问题

核心问题1：子组件Props接收错误 #

子组件当前的参数写法({ influencer, imagePath }, props)是错误的——React组件的props是单个对象，所有传递的属性都包含在这个对象里。你把click放在第二个参数props中，但实际上click是和influencer、imagePath一起传递的，导致根本拿不到正确的回调函数，所以箭头函数里无法调用父组件方法。

核心问题2：事件绑定与列表渲染规范问题 #

• 写onClick={() => { props.click}}时，只是引用了函数但没有执行，无法触发父组件方法；
• 直接写onClick={props.click}时，因为子组件内部div的key位置错误（React要求列表项的key必须放在组件标签上），导致React无法正确追踪列表项，出现组件复用、事件多次触发的异常。

修正后的代码 #

子组件代码 #

import { Avatar, Modal, Button } from "flowbite-react";
import { HiPlay, HiCheck, HiCheckCircle } from 'react-icons/hi';

export default function SearchResult({ influencer, imagePath, click }) {
    return (
        <div className="flex my-3 w-full cursor-pointer" onClick={click}>
            <Avatar
                size="xs"
                img={imagePath + influencer?.im}
                rounded={true}
            />
            <div className="flex w-[88%]">
                <div className="px-2 text-gray600 text-text-sm font-semibold">{influencer?.social_user_name}</div>
                <div className="text-gray600 text-text-sm">{influencer?.social_name}</div>
            </div>
            <div className="mt-[5px] mx-2 min-w-[16px]">
                {influencer?.verified ? <HiCheckCircle fill="#1C64F2" /> : ' '}
            </div>
            <div className="mt-[5px] mx-2 min-w-[16px]">
                {influencer?.isTrending ? <HiCheck fill="#1C64F2" /> : ' '}
            </div>
        </div>
    )
}

父组件代码 #

const showSearchResult = () => {
    return topTrendList.map((influencer) => {
        // 将key放在SearchResult组件上，确保React正确识别列表项
        return <SearchResult 
            key={influencer?.id}
            imagePath={topImagePath} 
            click={() => handleSearchInput(influencer)} 
            influencer={influencer}
        />
    })
}

// click function
const handleSearchInput = (item) => {
    console.log(item);
}

关键修正点 #

1. 子组件Props解构：将click加入第一个参数的解构列表，确保能拿到父组件传递的回调函数；
2. 事件绑定简化：直接将click作为onClick的回调（父组件已经通过箭头函数封装了influencer参数）；
3. 列表Key位置修正：将key从子组件内部的div移到<SearchResult>组件标签上，这是React列表渲染的规范写法，避免组件复用导致的异常。

如果需要在子组件用箭头函数包裹（比如传递子组件内部的额外参数），可以改成：

onClick={() => click()}

确保执行父组件传递的回调函数。

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