如何在 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

知道如何将它添加到我的导航组件中吗？