【问题标题】:React useState update is not re-rendering componentReact useState 更新不是重新渲染组件
【发布时间】:2021-03-10 15:09:26
【问题描述】:

我想重新渲染使用父组件状态作为道具的子组件。

我的场景: 并使用 react-slick 滑块在页面上显示图像,它有一个道具初始幻灯片,用于说明哪个滑块显示初始幻灯片。 我正在使用 useState() 来维护 initialSlide 值,页面上有另一个触发器更新了 initialSlide 值,当我更新 initialSlide 值时它不会重新渲染 react-slider。

请查看下面的演示代码: Demo

在上面的演示中,点击按钮> currentSlide 值更新> react-slider 不更新。

有没有办法在反应中实现这一点,我尝试使用 redux 存储但子组件永远不会重新渲染。

【问题讨论】:

    标签: reactjs react-state


    【解决方案1】:

    您可以使用sliderNextsliderPrev 方法。同样要使用它们,您应该通过useRef 钩子获得对滑块的引用。

    使用该方法的示例:https://react-slick.neostack.com/docs/example/previous-next-methods/

    工作滑块:https://stackblitz.com/edit/react-bwfh5g

    【讨论】:

    • 嗨 RukkiesMan,感谢您的回答。如果我使用更改幻灯片按钮转到下一张幻灯片,您给出的解决方案将起作用。如果我想从幻灯片 1 转到幻灯片 4,该怎么办?在那种情况下,我不能使用 slickPrev() 和 slickNext()。
    • 嗨,我有另一种方法来解决我的问题:slickGoTo(),这会起作用。非常感谢!
    • 酷!很高兴您找到了解决方案
    猜你喜欢
    • 1970-01-01
    • 2021-04-13
    • 1970-01-01
    • 2020-06-02
    • 2020-10-11
    • 2020-01-13
    • 1970-01-01
    • 2021-01-07
    • 2021-11-18
    相关资源
    最近更新 更多