Reactjs 如何根据下拉选项选择显示两个链接？

我给出了一个简单的下拉选项。这里我想根据选择显示两个链接

我添加了两个带有键值的菜单选项，如CULT-4a和HIN-4a，并添加了手柄点击功能。现在，如果我想选择CULT-4a显示2个链接。如何显示它。根据选择，我必须显示链接。在这里，我返回链接，但它们不显示

class DropOption extends React.Component {
    state = {
        visible: false,
    };

    handleMenuClick = (e) => {
        if (e.key === '1') {
          alert("cultA");
          this.setState({
            visible: true,
        })
        }
        else {
            alert("HIN");
        }
      }

    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">CULT-4A</Menu.Item>
                <Menu.Item key="2">HIN-4A</Menu.Item>
            </Menu>
        )
        return (
            <div align="center">
                <Dropdown
                    overlay={menu}>
                    <a className="ant-dropdown-link" href="#">
                        Select one option<Icon type="down" />
                    </a>
                  <DisplayLinks visible={this.state.visible}/>
                </Dropdown>
            </div>
        )
    }
}

class-DropOption扩展了React.Component{
状态={
可见：假，
};
handleMenuClick=（e）=>{
如果（e.key=='1'）{
警惕（“邪教”）；
这是我的国家({
可见：对，
})
}
否则{
警报（“HIN”）；
}
}
render（）{
常量菜单=(
邪教-4A
HIN-4A
)
返回(
)
}
}

在这里，我添加了DisplayLink.js组件代码

render() {
        return (
            <div align="center">
            <a href="#" onClick={this.showCourseModal}>Course</a>
            <a href="#" onClick={this.showStudentList}>StudentList</a            

        )
    }

render（）{
返回(
StudentList您返回了两个链接，但没有在任何地方使用它们。
您需要将其附加到依赖于要显示的状态或道具的元素

import React from "react"
import { Dropdown, Menu, Icon } from 'antd'

class DropOption extends React.Component {
    state = {
        visible: false,
        dropdownOptions : <a className="ant-dropdown-link" href="#">
                        Select one option<Icon type="down" />
                    </a>
    };

    handleMenuClick = (e) => {
        if (e.key === '1') {
        alert("cultA");
        this.setState({
            dropdownOptions :  <span>
            <a href="#">Course</a>
            <a href="#">StudentList</a>
        </span>
        })
        }
        else {
            alert("HIN");
        }
    }

    render() {
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="1">CULT-4A</Menu.Item>
                <Menu.Item key="2">HIN-4A</Menu.Item>
            </Menu>
        )
        return (
            <div align="center">
                <Dropdown
                    overlay={menu}>
                    this.state.dropdownOptions
                </Dropdown>
            </div>
        )
    }
}

export default DropOption

从“React”导入React
从“antd”导入{下拉菜单、菜单、图标}
类DropOption扩展了React.Component{
状态={
可见：假，
下拉选项：
};
handleMenuClick=（e）=>{
如果（e.key=='1'）{
警惕（“邪教”）；
这是我的国家({
下拉选项：
})
}
否则{
警报（“HIN”）；
}
}
render（）{
常量菜单=(
邪教-4A
HIN-4A
)
返回(
this.state.dropdownpoptions
)
}
}
导出默认DropOption
根据选择我想显示链接如何显示。我必须在哪里添加链接并显示它。我是这项技术的新学员。我想在单个页面中显示这些链接。这些新链接是否会添加到下拉元素下？我必须根据下拉列表中选择的内容添加两个链接。我必须精简k基于它将显示的键值，因此如果您正确处理条件，但将新链接返回到onClick函数，但它无法为您呈现，则我必须添加条件。您需要以能够呈现的方式返回链接