React嵌套组件点击传参问题：如何识别点击组件并传递参数

我完全懂你的困扰——想让子组件点击时能识别具体是哪个组件，传参时却卡在了「要么加载时就触发函数，要么没法传递参数」的两难境地。下面给你几个实用的解决方案，结合你的代码来一步步演示：

方法1：在子组件的点击事件中用箭头函数传参 #

这种方法不需要改动父组件的props传递逻辑，只需要在子组件里处理点击事件时，把当前组件的标识参数（比如categoryName）传给父组件的函数：

修改你的子组件CategoryControlRow的render方法：

render() {
    return (
        <p className={"category " + this.props.class} onClick={() => this.props.clickMe(this.props.categoryName)}>
            {this.props.categoryName}
            <span>
                {this.props.currency} {this.props.value}
            </span>
        </p>
    )
}

父组件的代码保持不变，依然传递clickMe={this.clickMe}即可。这样点击子组件时，就会把对应的分类名称传给clickMe函数，弹窗就能准确显示你点击的是哪个组件了。

方法2：在父组件传递props时用箭头函数包裹 #

如果你想把参数传递的逻辑放在父组件，可以在渲染CategoryControlRow时，用箭头函数包裹clickMe，并传入你需要的参数：

修改父组件的render部分：

render() {
    return (
        <div className="col-xs-12 col-md-3" id="categories">
            <p className="text-uppercase" id="filter">Ansicht Filtern</p>
            <CategoryControlRow 
                class={'category purple'} 
                clickMe={() => this.clickMe('1. Kategorie')} 
                categoryName={'1. Kategorie'} 
                currency={'CHF'} 
                value={"78.00"} 
            />
            <CategoryControlRow 
                class={'category orange'} 
                clickMe={() => this.clickMe('2. Kategorie')} 
                categoryName={'2. Kategorie '} 
                currency={'CHF'} 
                value={"68.00"} 
            />
            {/* 其他子组件同理修改 */}
        </div>
    )
}

这种方式的好处是你可以灵活传递任意参数（不一定是子组件的props），但要注意：每次父组件render时都会创建新的箭头函数，对于简单组件来说影响不大，但如果是大型列表组件，可能会有轻微的性能损耗。

方法3：使用bind绑定参数 #

因为你的clickMe已经用类属性箭头函数绑定了this，所以可以直接用bind来附加参数：

父组件中修改clickMe的传递：

<CategoryControlRow 
    class={'category purple'} 
    clickMe={this.clickMe.bind(this, '1. Kategorie')} 
    categoryName={'1. Kategorie'} 
    currency={'CHF'} 
    value={"78.00"} 
/>

效果和方法2类似，同样每次render会创建新的函数实例，原理和箭头函数一致。

补充说明 #

为什么直接写this.clickMe()会在加载时触发？因为在JSX中，onClick需要接收一个函数引用，而this.clickMe()是直接执行这个函数，并把返回值（你的clickMe没有返回值，所以是undefined）传给onClick，所以组件加载时就会执行一次，点击时反而没反应。而this.clickMe是传递函数本身，点击时才会执行，但没法直接带参数——上面的几种方法就是解决这个矛盾的常用手段。

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