Question

我有一个问题，我有一个React组件，需要在两个不同的地方使用函数。

该函数称为“ handleBotAttackClick”。

我需要在下面看到的Header和ShowAttackStats方法中使用它。

所有状态材料都在标头中定义。

但是由于“ handleBotAttackClick”是在标头中定义的，因此它在ShowAttackStats中显示为未定义。

是否有一种方法可以调和，以便双方都能成功使用它？

谢谢！

const ShowAttackStats = () => {
    return (
        <>
            <span>
                < a href="#" onClick={handleBotAttackClick}>Show All Stats</a>
            </span>
        </>
    );
}

const Header = () => {

    const [showAttackScreen, setAttackScreen] = useState(false);

    const handleBotAttackClick = useCallback(e => { setAttackScreen(true) });

    return (

            <div>
                <p> {showAttackScreen && <showAttackStats />}
            </div>

            <div>
                <p> {showAttackScreen && <AttackScreenGrid />}
            </div>
        )
    }

Answer 1

const ShowAttackStats = ({ onClick }) => {
    function handleClick(ev) {
     ev.preventDefault();
     onClick && onClick()
    }

    return (
        <>
            <span>
                < a href="#" onClick={handleClick}>Show All Stats</a>
            </span>
        </>
    );
}

您的标题

const Header = () => {

    const [showAttackScreen, setAttackScreen] = useState(false);

    const handleBotAttackClick = useCallback(e => { setAttackScreen(true) });

    return (

            <div>
                <p> {showAttackScreen && <ShowAttackStats onClick={handleBotAttackClick} />}
            </div>

            <div>
                <p> {showAttackScreen && <AttackScreenGrid onSomeAction={handleBotAttackClick}/>}
            </div>
        )
    }

如何在两个不同的组件中使用状态？

1 个答案: