React开发WhatsApp克隆：跨组件调用onClick隐藏头像卡片

要实现子组件按钮触发父组件隐藏头像卡片的需求，核心是父组件向子组件传递回调函数，子组件通过调用这个回调来通知父组件修改状态。具体实现步骤如下：

1. 父组件（Top_bar）传递关闭回调给子组件 #

在Top_bar组件中，将隐藏卡片的逻辑（setdp(false)）封装成回调函数，作为props传递给Show_dp组件：

修改Top_bar中Show_dp的调用代码：

<div id="dp_card" style={{display: dp? "flex": "none"}}>
    {/* 传递关闭回调，同时修正image传值错误：应该用prop.image而非profile_picture */}
    <Show_dp image={prop.image} onClose={() => setdp(false)} />
</div>

2. 子组件（Show_dp）接收并触发回调 #

在Show_dp组件中，接收父组件传来的onClose属性，给目标按钮绑定onClick事件，触发这个回调：

修改Show_dp组件代码：

function Show_dp(prop){
    return(
        <div id="box">
            <div id="dp">
                <img src={prop.image}></img>
            </div>
            <div id="buttons">
                {/* 绑定onClick事件，调用父组件的关闭回调 */}
                <div className="buttons_dp" onClick={prop.onClose}>
                    <FontAwesomeIcon className="ico" fontSize="1.5em" color="white"  icon={faMessage} />
                </div>
            </div>
        </div>
    )
}

export default Show_dp;

额外修正提示 #

你原代码中Top_bar组件给Show_dp传image={profile_picture}是错误的，应该使用prop.image（和左侧头像的图片源保持一致），否则头像无法正常加载，上面的代码已经同步修正了这个问题。

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