https://codesandbox.io/s/chart-3yx8p“圖表”組件由 3 個圖表層疊而成：折線圖 - “VictoryLine”組件2 個散點圖 - “VictoryScatter”組件折線圖只是呈現(xiàn)線。第一個散點圖在線上的每個點上呈現(xiàn)藍色圓圈 - 我們將其稱為“BlueScatter”。這兩個接收相同的靜態(tài)數(shù)據(jù)。第二個散點圖呈現(xiàn)底部的黑點 - 我們將其稱為“BlackScatter”。BlackScatter 的數(shù)據(jù)處于需要更改的狀態(tài)。每當您將鼠標懸停在其中一個藍色圓圈上時，會發(fā)生兩件事：顯示工具提示圓圈下方的黑點向上移動了一半當您的鼠標離開圓圈時，工具提示消失，點將向下移動。然而后者并沒有發(fā)生......當您將鼠標懸停在一個圓圈上時，傳遞給該圓圈標簽組件的“活動”道具將設置為 true - 當您的鼠標離開時設置為 false?！癟ooltip”組件設置為 BlueScatter 上每個點的標簽，因此 Tooltip 接收此 prop。Tooltip 只是一個不可見的 SVG，用于錨定 Material UI 工具提示。BlueScatter 的事件處理程序控制此邏輯（請參閱常量文件）。在 Tooltip 中，我使用從 Chart 傳遞的 props 來更改該索引處 BlackScatter 數(shù)據(jù)的坐標。綜上所述：在圖表中，我將 INITIAL_HOVER_DATA 傳播到狀態(tài)數(shù)組中以設置 BlackScatter 的數(shù)據(jù)。在 Tooltip 中，我再次將該常量擴展到一個空數(shù)組中，以便在以下 if 語句中使用。過去我一直能夠使用擴展運算符來制作數(shù)組的副本 - 但由于某種原因，工具提示中的第 14 行似乎正在操縱內(nèi)存中的原始常量。這就是為什么黑點不回到原來的位置。為什么會這樣？取消注釋第 16 行會使事情按預期工作，但理論上不需要它。順便說一句——如果有人能提出更好的方法來實現(xiàn)同樣的功能，我會很高興收到反饋！TLDR：操作 INITIAL_HOVER_DATA 數(shù)組的副本會更改內(nèi)存中的原始數(shù)組。