Question

我有一张 Mui 卡的列表。在卡片悬停时，我希望在卡片内出现一个浮动操作按钮。我正在使用状态来实现这一点，问题是悬停状态在状态更改期间应用于所有卡，这意味着按钮显示在每张卡上，而不是被指向/悬停的那个。我怎样才能控制这个按钮只显示在状态动作被触发的卡片上。

另外，有没有办法不引起状态改变来重新渲染其他组件？我有一个在悬停时重新渲染的 <ChartistGraph>，它的动画不断重复。

基本上这就是我正在做的：

    const [state, setState] = useState({
        actionButton: false
    });

我的卡：

                        <Card
                          className="miniGraphCards"
                          onMouseOver={() => setState({ actionButton: true })}
                          onMouseOut={() => setState({ actionButton: false })}
                        >

基于关闭状态和悬停的条件渲染：

                            {state && state.actionButton != false &&
                              <Fab>
                                <EmojiEmotionsIcon />
                              </Fab>}

请查看可重现的代码：您会注意到图形的重复重新渲染以及悬停时应用于所有卡片的按钮。

https://codesandbox.io/s/elastic-kowalevski-j3wjx

Answer 1

您正在 App 组件上保存“状态”。您的布尔值 actionButton 将针对所有项目触发。

由于您希望 App 知道哪个项目处于活动状态/悬停，请考虑保存该 Card 的唯一值，以便您可以确定哪个 {{1} } 被悬停。

由于我仍然可以通过您的 previous question 了解该应用的工作原理，因此我建议您为悬停的 Card 保存 data.symbol。

首先，onHover，记住current Card

data.symbol

循环遍历所有卡片时，您可以检查当前卡片是否需要像这样的图标：

<Card
    onMouseOver={() => setState({ actionButton: data.symbol })}
    onMouseOut={() => setState({ actionButton: null })}
>

Updated sandbox

修复 Mui <Cards> 渲染的条件状态行为

1 个答案: