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

【问题标题】：How do use a piece of state in two different components?如何在两个不同的组件中使用一个状态？
【发布时间】：2020-05-15 22:10:35
【问题描述】：

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

该函数称为“handleBotAttackClick”。

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

所有状态的东西都在 Header 中定义。

但由于 'handleBotAttackClick' 是在 Header 中定义的，它在 ShowAttackStats 中显示为 undefined。

有没有办法调和这个，以便双方都能成功使用它？

谢谢！

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>
        )
    }

【问题讨论】：

您好！处理此问题的最佳方法是使用状态管理器。我建议你应该使用 context API。
@SiradjiAwoual 嗨，谢谢，但是没有办法只使用 React 而不是额外的 API 吗？我只需要为这一部分做。谢谢
上下文 api 有点多，因为标记非常简单。当ShowAttackStats 调度事件时，使用handleBotAttackClick 作为回调
您可以lift state up，如果道具钻孔成为问题，那么您可以使用上下文。
@SkyeBoniwell 实际上，上下文 API 是反应的一部分。它就像 redux，虽然要小得多。

标签： reactjs react-hooks react-state-management

【解决方案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>
        )
    }

【讨论】：

所以它部分工作。它显示了底部组件，即 AttackScreenGrid，但没有显示 ShowAttackStats。