仅更新部分内容时做出反应以重新渲染整个组件

如何解决仅更新部分内容时做出反应以重新渲染整个组件

我相信这有点奇怪。我已经尝试解决了两个星期。我确信答案就在那里，但在这一点上我还是看不到它。

我事先表示歉意：我无法在此处发布实际代码。

情况如下。我总共有三个部分。一个组件显示一个旋转木马，可以使用四个不同的按钮滑动。完美运作。该轮播确实具有自己的内部状态，但不使用任何useEffect挂钩。通过更新状态变量来处理滑动，状态变量又重新渲染组件并使之在过程中移动。

我拥有的另一个组件是一种滑块。您可以单击要设置值的侧面或中间的箭头。因此，从本质上讲，它是由按钮制成的滑块。这也像一个魅力。该组件也确实保持其自己的状态，并使用useEffect在所选值周围绘制边框。

第三个组件将两者合并为一个视图。它的意思是在顶部显示旋转木马，在底部显示滑块。它也这样做。但是，当我单击滑块时，轮播会再次被动画化，尽管没有被点击。我知道，这是由我正在执行的各种状态更新引起的。我想知道只有在更新滑块时，是否有一种方法可以防止轮播的重新呈现。

我将尝试显示其结构：

Carousel: {
    const [slide,setSlide] = useState(true)
    const [slideDirection,setSlideDirection] = useState("left");
    return (
        <div>Left Arrow</div>
        <div>Content</div>
        <div>Right Arrow</div>
    );
}

Slider: {
    const [selectedBox,setSelectedBox] = useState(0);
    // bunch more state variables to set the borders correctly

    useEffect(() => {
        highlightBox(); //uses selectedBox to determine which borders to draw and then set the state
    },[selectedBox]);


    return (
        <div>Left Arrow</div>
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Right Arrow</div>
    )
}

任何帮助将不胜感激！如果我想进一步澄清，请告诉我。