在列表页面以及详细信息弹出窗口中实现相同的组件，如何在模态详细信息中重用列表组件？

如何解决在列表页面以及详细信息弹出窗口中实现相同的组件，如何在模态详细信息中重用列表组件？

我有一个 listusers 组件和 modalpopup 组件和 userdetail 组件。 在列表组件中，我有 onClick 事件来获取用户和类似用户的详细信息，在 userdetail 组件中传递数据并在 modal> userdetails> listusers 中呈现 现在它会在点击时创建新的模式/细节。如何重用相同的模式/细节并更新数据。 在 App.js 我有 用户列表.js

const userList = (this.props.usersData.map((item) => {
  return (
    <User
      key={"list_" + item.id} 
      data={
        userId: item.id,firstName: item.firstName,lastName: item.lastName
      }
      handleClick={this.openDetails}
    />
  )
}));

const userDetail = (this.state.userId || '' !== ''
  ? <UserDetail userIdForDetails={this.state.userId}></UserDetail>
  : null
);

return (
  <>
    {userList}
    <Modal
      modalClosed={this.closeDetails}
      show={this.state.showPopup}
      backDrop={true}
      modalClass="Modal"
      modalType="popup"
      handleClick=""
    >
      {userDetail}
    </Modal>
  </>
)

现在在userDetail.js中，除了显示基本的细节，我还要绑定另一个列表

const similarUserList = (
  <UserList userData={similarUsers}/>
);
{
  <div>firstName</div>
  <div>lastName</div>
  <div className={classes["similar-list"]}>
    {similarUserList }
  </div>
}

每当我点击用户时，它都会创建新的模态，b'coz 模态是 listUsers 的一部分，我们正在用户详细信息中重新呈现它。

是否有其他方法可以在点击时更新模态或关闭现有模态？

谢谢