如何在 React 中向现有导航组件添加确认组件

Question

我的 React 程序中有一个现有的导航组件，它具有用于“托管”、“加入”和“注销”的 onClicks，我想在“注销”部分添加一个确认组件，以确认用户是否真的想要注销或不。这是代码的导航部分：export default class Navigation extends Component {  state = { activeItem: 'home' };  handleItemClick = (e, { name }) => this.setState({ activeItem: name });  render() {    const { activeItem } = this.state;    return (      <Segment inverted>        <Menu inverted pointing secondary>          <Menu.Item            as={Link}            to='/'            name='home'            active={activeItem === 'home'}            onClick={this.handleItemClick}          />          <Menu.Item            as={Link}            to='/host'            name='host'            active={activeItem === 'host'}            onClick={this.handleItemClick}          />          <Menu.Item            as={Link}            to='/join'            name='join'            active={activeItem === 'join'}            onClick={this.handleItemClick}          />          <Menu.Item            as={Link}            to='/logout'            name='logout'            active={activeItem === 'logout'}            onClick={this.handleItemClick}          />        </Menu>      </Segment>react.semantic-ui.com有这个代码块来实现一个确认组件：import React, { Component } from 'react'import { Button, Confirm } from 'semantic-ui-react'class ConfirmExampleConfirm extends Component {  state = { open: false }  open = () => this.setState({ open: true })  close = () => this.setState({ open: false })  render() {    return (      <div>        <Button onClick={this.open}>Show</Button>        <Confirm          open={this.state.open}          onCancel={this.close}          onConfirm={this.close}        />      </div>    )  }}export default ConfirmExampleConfirm知道如何将它添加到我的导航组件中吗？