Javascript 同级组件的Tranfser道具

我希望在模式标题中显示当前名称和名称，而不是%username% 用户的姓氏。我不能完成这个任务。我 解决问题后，给出如何优化代码的想法

代码：

类应用程序扩展了React.Component{
状态={
秀:假,，
};
showModal=（）=>{
这是我的国家({
show:！this.state.show
});
};
render（）{
const users=this.props.data.users；
const userList=users.map（user=>）
返回(
{userList}
{this.state.show？：null}
)
}
}
类用户扩展了React.Component{
onOpen=（）=>{
this.props.onOpen&&this.props.onOpen（）；
};
render（）{
const{avatar，name，姓氏，city，country}=this.props.user；
返回(
{`${name}${姓氏}`}
{${city}、${country}
)
}
}
类组件{
onClose=（）=>{
this.props.onClose&&this.props.onClose（）；
};
render（）{
如果（！this.props.show）{
返回null；
}
//tak wygląda struktura HTML dla模态箱A
返回(
报表用户
)
}
}
ReactDOM.render（，document.querySelector（“#app”））

使用state

ReportUsr

存储要报告的用户，该用户已被函数

更改。ReportUsr

在应用程序类中，然后将函数作为prop

report

传递给用户类，以调用该用户组件实例的值

OnClick

然后，从App类创建的模态组件包含的内容是App.state.ReportUsr

< Modal onClose={this.showModal} show={this.state.show} >{this.state.ReportUsr}</ Modal> 

{this.state.ReportUsr}

活生生的例子

---

代码

基本上，您需要做的是让两个组件从同一父组件接收其名称属性。如果组件可以更改数据，则需要从父级传递一个更改值本身的函数，父级应将数据保持在状态。也就是说，这不是你应该问的问题。您应该首先阅读React文档，尝试完成上述任务，并在想法用尽后，向stackoverflow提供一个几乎可以解决问题的示例，