Javascript 反应-在单击处理程序中传递组件道具作为道具传递

我是新来的。我有一个react组件

子组件

如下-

//this.props has obj = {'id': 123, 'name': 'abc'}
class Child extends React.Component{

    constructor(props){
        super(props);
    }
    render(){
        return(
            <div onClick={this.props.remove}></div>
        );
    }
}

//this.props有obj={'id'：123，'name'：'abc'}
子类扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
}
}

此组件是从某个

父组件

中使用的，该组件具有此类

子组件的列表，每个子组件都有自己的
This.props.obj
this.props.remove
是另一个从
Parent
传递给
Child
的处理程序

现在，单击从
Child
组件重新编辑的
div
，我想在remove函数中传递
这个.props.obj.id
。我该怎么做呢

谢谢
欢迎回复


我会这样写

class Child extends React.Component{

    constructor(props){
        super(props);
    }

    handleClick({id}) {
       this.props.remove(id)
    }

    render(){
        const obj = this.props
        return(
            <div onClick={() => this.handleClick(obj)}></div>
        );
    }
}

类子级扩展React.Component{
建造师（道具）{
超级（道具）；
}
handleClick（{id}）{
此.props.remove（id）
}
render（）{
const obj=this.props
返回(
this.handleClick（obj）}>
);
}
}
您可以使用箭头函数来实现这一点

类子级扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
this.props.remove（this.props.obj.id）}>
);
}
}
您能解释一下handleClick参数中的{id}是什么吗。这是在破坏结构吗？确认一下，这是在破坏结构。帮助您的功能和总体代码库保持干净。