Question

我有以下组件，应该根据单击按钮加载其他两个组件。

当我单击“ DungeonPage”链接时，应该加载我的GameDungeon组件，并且还应该隐藏“ GameCharacter”组件。

与之类似，但对于“ CharacterPage”按钮却相反。

但是，当我单击任一按钮时，什么也没有发生。没有变化，没有加载，也没有错误。

所以我不确定从这里去哪里。

我遵循了一些React＆React Hooks教程，但是我无法使它正常工作。

这是我的代码：

import React, { useState } from "react";
import GameDungeon from "../App";
import GameCharacter from "../Character/App";

const Admin = () => {

    const [showDungeon, setDungeon] = useState(false);
    const [showCharacter, setCharacter] = useState(false);

    const handleCharacterClick = e => { setDungeon(false) && setCharacter(true) };
    const handleDungeonClick = e => { setCharacter(false) && setDungeon(true) };

    return (
        <div className="admin">
            <nav>
                <div>
                    <ul>
                        <li>
                            <a id="DungeonPage" href="#" onClick={ () => handleDungeonClick}>Game Dungeon</a>
                        </li>
                        <li>
                            <a id="CharacterPage" href="#" onClick={ () => handleCharacterClick}>Game Character</a>
                        </li>
                    </ul>
                </div>
            </nav>  

            <div>
                {showDungeon && <GameDungeon />}
            </div>
            <div>
                {showCharacter && <GameCharacter />}
            </div>
        </div>

    );
}

我有什么想念的东西吗？

谢谢！

Answer 1

您必须直接将回调函数作为prop传递。另外，请使用useCallback挂钩包装回调，以提高性能。

import React, { useState, useCallback } from "react";
import GameDungeon from "../App";
import GameCharacter from "../Character/App";

const Admin = () => {

    const [showDungeon, setDungeon] = useState(false);
    const [showCharacter, setCharacter] = useState(false);

    const handleCharacterClick = useCallback(e => setDungeon(false) || setCharacter(true));
    const handleDungeonClick = useCallback(e => setCharacter(false) || setDungeon(true));

    return (
        <div className="admin">
            <nav>
                <div>
                    <ul>
                        <li>
                            <a id="DungeonPage" href="#" onClick={handleDungeonClick}>Game Dungeon</a>
                        </li>
                        <li>
                            <a id="CharacterPage" href="#" onClick={handleCharacterClick}>Game Character</a>
                        </li>
                    </ul>
                </div>
            </nav>  

            <div>
                {showDungeon && <GameDungeon />}
            </div>
            <div>
                {showCharacter && <GameCharacter />}
            </div>
        </div>

    );
}

Answer 2

您的代码有几个问题。要解决此问题，您可以做以下更改：

IdentityServer4.AccessTokenValidation

我应该使用钩子显示/隐藏组件的链接无法正常工作

2 个答案: