问题标签 [react-spring]

我正在尝试将react-spring动画库导入到基于反应组件类的 reactjs 应用程序中。

似乎新的（截至 2019 年）React Hooks 使集成变得更加混乱。

所以这就是为什么我要问如何react-spring在 ReactJS 应用程序中使用哪个又使用反应钩子，什么使用类。

无法正常工作的代码如下所示：

导致此错误：

在我的react应用程序中，我试图react-spring在更改时使用淡入图像src。我在/img/命名的目录中有多个图像，以匹配activeIndex我要显示的当前图像。当前使用下面的代码，淡入效果仅应用于第一张图像。我究竟做错了什么？

按照教程和代码看起来相同但仍然出错：“ 126:20-30 'react-spring' 不包含名为 'Transition' 的导出。 ”...我阅读了 react spring 的文档以获得过渡效果和已更改导入尝试将我的代码重新定义为文档所说的内容，但仍然没有。

我创建了一个门户来显示一条消息。来编译时，我在 ModalWrapper 上遇到错误，无法弄清楚。所有技术都已安装并且是最新的。我以不同的方式导入和导出似乎可以弄清楚。

当 spring 项目离开 DOM 时，什么也没有发生（没有离开动画）。

完整的 CodeSandbox：https ://codesandbox.io/s/jzz6xv1y4w

我正在尝试测试我的 SpringComponent。该组件使用react-spring制作动画。当我运行测试时，出现以下错误：

“Jest 遇到了意外的令牌”。

如果我评论我的 Spring 代码，错误就会消失并且我的测试通过。

这是测试代码：

和 SpringComponent 代码：

我想知道我必须做什么来测试这段代码。我应该嘲笑什么吗？

目前我有一个用例，其中动画是在由单击操作启动的状态更改时触发的。当我第一次点击时一切正常，如果我连续点击同一个链接，动画不会触发，我相信这是因为状态没有改变。

代码沙箱

在上面的代码沙箱中，第一次点击“沿海航运”会触发动画，但随后的连续点击不会触发动画。

我有这个使用 react-spring 4.0.1 代码的代码：

在 react-spring 8 中，没有过渡和动画。

如何将此代码升级到最新版本。

我正在尝试使用 react-springuseSprings来使用户能够重新排序 formik 中的项目FieldArray。useSprings Draggable List 演示（在此处找到）用于useRef管理项目的顺序。FieldArray带有许多用于插入、删除和移动项目的数组辅助函数。

我遇到的问题是：

1）使用formik的数组辅助方法重新排序现有项目move成功改变了数组顺序，但需要额外点击才能呈现正确的顺序

2) 使用数组辅助方法添加或删除数组项会产生意想不到的结果。改变 ref 的长度不会改变order.currentinside ofuseGesture

我也尝试过在道具更改时使用useState而不是useRef更新状态。useEffect

这是我制作的代码沙箱：https ://codesandbox.io/s/usesprings-with-fieldarray-56bex

在bind函数中，注释掉

我希望能够将 formik 的move、insert和removehelper 函数与 react-spring 一起使用，以无缝地重新排序、添加和删除FieldArray.