React 两个组件之间的状态同步或两个不同事物之间的更改同步

Posted

技术标签:

【中文标题】React 两个组件之间的状态同步或两个不同事物之间的更改同步【英文标题】:React state synchronization between two components or synchronisation of changes between two different things 【发布时间】:2020-08-22 15:40:57 【问题描述】:

所以我正在尝试实现图像的幻灯片放映,并且在从每个图像到另一个图像的滑动效果上,左侧的文本也会发生变化。所以我试图找到实现这一点的方法,是否将幻灯片作为单独的组件,将文本作为单独的组件,并将状态共享为活动类名,以便在它们之间共享或应用任何其他可能的策略.希望在这方面得到帮助。

Refer the first image

Refer the second image

【问题讨论】:

【参考方案1】:

我更喜欢使用两个单独的组件,但它们的内容取决于两个不同的状态变量/对象,并使用 setState 回调来更新一个又一个状态变量。将这些变量放在父级的反应组件中可能会很棒,因此可以将父级的引用传递给其后代并操纵这些状态变量以避免与道具发生冲突。此外,您可能想在以下位置使用幻灯片反应组件:

https://github.com/femioladeji/react-slideshow

【讨论】:

非常感谢,会试试这个

以上是关于React 两个组件之间的状态同步或两个不同事物之间的更改同步的主要内容,如果未能解决你的问题,请参考以下文章

React:在两个组件层次结构之间传递状态的上下文

使用 store 来优化 React 组件

React: React的组件状态机制

Linux之线程同步

React与Vue的相同与不同点

在 React.js 中的两个组件之间创建链接 [关闭]