如何通过上下文菜单将父函数定义为子函数？

Question

我正在开发一个菜单，您可以在其中查看包含所有存储库已创建的列表。我正在使用react-contextmenu，我希望用户在右键单击后可以修改存储库。

过去，我成功创建了上下文菜单。一切正常，除了在选择给定操作时无法重定向用户之外。

为尝试解决该问题，我从dynamic menu example

中汲取了灵感

这是我的code

Repo.js：

class Repo extends Component {
    constructor(props) {
        super(props)

        this.handleClick = this.handleClick.bind(this)

        this.state = {
            infos: [],
            infosDepots: [],
            isLoading: true
        }

    ....

    handleClick(e, data, w) {
        const token = sessionStorage.getItem("token")

        const id = data.idDepot
        const nom = data.nomDepot
        const action = data.action

        switch (action) {
            ...
            case "edit":
                console.log("edit")
                return <Redirect to={`/modifierdepot/${id}/${nom}`} />
            default: break
        }
    }

    renderDepots() {
        if (this.state.infosDepots.length > 0) {
            return this.state.infosDepots.map(depot => {
                const state = Number(depot.actif[0]) === 1 ? 1 : 0

                return (
                    <ContextMenuTrigger
                        key={depot.id_depot[0]}
                        id="MENU_REPOSITORY"
                        idDepot={depot.id_depot[0]} nomDepot={depot.nom[0]} state={state}
                        onRepoClick={this.handleClick}
                        collect={collect}
                    >
                        {/* <div onClick={() => this.handleClick(depot.id_depot[0], depot.nom[0])}> */}
                            <Link to={`/depot/${depot.id_depot[0]}/${depot.nom[0]}`}>
                                {
                                    state === 1
                                        ? (<img src={depotActif} alt="Dépôt actif" />)
                                        : (<img src={depotInactif} alt="Dépôt inactif" />)
                                }
                                {depot.nom[0]}
                            </Link>
                        {/* </div> */}
                    </ContextMenuTrigger>
                )
            })
        }
        else
            return <FormattedMessage id="no-repos" defaultMessage="Pas de dépôts" tagName="p" />
    }

    render() {
        return (
            <div className="SousMenuGroupe">
                <div><Link to="/creerdepot"><img src={créerDepot} alt="Créer un dépôt" /></Link></div>
                {
                    this.state.isLoading
                        ? (<FormattedMessage id="repo.get" defaultMessage="Retrieving repositories..." tagName="p" />)
                        : (<div>{this.renderDepots()}</div>)
                }
                <ContextMenuRepo />
            </div>
        );
    }
}

function collect(props) {
    return props
}

export default Repo

ContextMenuRepo.js：

const ContextMenuRepo = (props) => {
    return (
        <ContextMenu id="MENU_REPOSITORY">
            {
                props.state === 1
                    ? (
                        <MenuItem onClick={props.onRepoClick} data={{ action: "deactivate" }}>
                            <FormattedMessage id="cm.repo.deactivate" defaultMessage="Deactivate the repository" />
                        </MenuItem>
                    )
                    : (
                        <MenuItem onClick={props.onRepoClick} data={{ action: "activate" }}>
                            <FormattedMessage id="cm.repo.activate" defaultMessage="Activate the repository" />
                        </MenuItem>
                    )
            }
            ....
            <MenuItem onClick={props.onRepoClick} data={{ action: "edit" }}>
                <FormattedMessage id="cm.repo.edit" defaultMessage="Edit the repository" />
            </MenuItem>
        </ContextMenu>
    )
}

export default ContextMenuRepo

因此，当我单击“编辑存储库”时，应该重定向到/ modifierdepot / id / nom。但是相反，什么也没有发生……我什至看不到任何console.log。

希望您能找到我的问题，谢谢。

（英语不是我的母语，所以如果您发现任何错误，请告诉我：））