修復用於渲染 Mui 的條件 state 行為<cards></cards>

Question

我有一張梅卡的清單。 在卡片 hover 上，我希望卡片內出現浮動操作按鈕。 I'm using state to achieve this, the issue is that the hover state is being applied to ALL cards during state change, meaning the button is showing up on every card, and not the one that's being pointed at/hovered. 我怎樣才能控制這個按鈕只顯示在 state 動作被觸發的卡上。

此外，無論如何不會導致 state 更改以重新渲染其他組件？ 我有一個<ChartistGraph>正在 hover 上重新渲染，它不斷重復它的 animation。

基本上這就是我正在做的事情：

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

我的卡：

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

基於 state 和 hover 的條件渲染：

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

請查看可重現的代碼：您會注意到圖形的重復重新渲染以及按鈕被應用於 hover 上的所有卡。

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

Answer 1

您正在App組件上保存“狀態”。 您的 boolean actionButton將為所有項目觸發。

由於您希望App知道哪些項目處於活動狀態/懸停狀態，請考慮保存該Card的唯一值，以便您可以確定懸停在哪個Card上。

由於我仍然從您之前的問題中知道該應用程序的工作原理，因此我建議為您懸停的Card保存data.symbol 。

一、onHover，記住當前的data.symbol

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

在遍歷所有卡片時，您可以檢查當前卡片是否需要這樣的圖標：

{state && state.actionButton === data.symbol && (
    <Fab>
        <EmojiEmotionsIcon />
    </Fab>
)}

更新的沙盒