Reactjs 如何使用按钮单击上的挂钩重新设置react spring动画的动画？

以下是来自的简单组件：

从'react spring'导入{useSpring，动画}
函数App（）{
const props=useSpring（{opacity:1，from:{opacity:0}）
回来我会淡入
}

问题

---

如何再次设置

fadeIn

-效果（或任何其他动画）的动画，例如，当我单击按钮或承诺得到解决时？

基本上可以使用useSpring和事件产生两种效果

您可以根据事件的状态更改样式（例如不透明度）

可以在状态更改时重新启动动画。重新启动的最简单方法是重新启动它

我创造了一个例子。我想你想要第二个案子。在我的示例中，我通过更改第二个组件的键属性来重新渲染它

const Text1=（{on}）=>{
constprops=useSpring（{opacity:on？1:0，from:{opacity:0}）；
返回

我希望这就是你的意思。
你基本上可以用useSpring和一个事件产生两种效果

您可以根据事件的状态更改样式（例如不透明度）

您可以在状态更改时重新启动动画。重新启动的最简单方法是重新播放它

我创建了一个示例。我想您需要第二个示例。在我的示例中，我通过更改第二个组件的键属性来重新启动它

const Text1=（{on}）=>{
constprops=useSpring（{opacity:on？1:0，from:{opacity:0}）；
返回

我希望这就是你的意思。
Text2的例子正是我想要的。你能解释一下为什么它与
key={on}一起工作吗
？也可以在不创建单独组件的情况下执行此操作吗？这是一个技巧。我想您知道，如果在循环中创建react组件，则必须定义key属性。react在更改期间使用此属性来决定更新哪个组件和删除哪个组件。它也适用于单个组件。如果您更改了key属性，它将将替换为一个新组件。我认为您必须创建一个单独的组件，因为您要重新启动useSpring初始化。我不知道更简单的解决方案。我知道键是如何工作的，但我不知道的是，您可以将一个键放在单个组件上。有点遗憾的是，没有额外组件就没有解决方案。如果
useSpring
为此返回了一个回调：
const{props，reanimate}=>useSpring（…）
。但这可能根本不可能。无论如何，您的解决方案已经足够好了。
Text2
的示例正是我想要的。您能解释一下为什么它与
key={on}一起工作吗
？也可以在不创建单独组件的情况下执行此操作吗？这是一个技巧。我想您知道，如果在循环中创建react组件，则必须定义key属性。react在更改期间使用此属性来决定更新哪个组件和删除哪个组件。它也适用于单个组件。如果您更改了key属性，它将将替换为一个新组件。我认为您必须创建一个单独的组件，因为您要重新启动useSpring初始化。我不知道更简单的解决方案。我知道键是如何工作的，但我不知道的是，您可以将一个键放在单个组件上。有点遗憾的是，没有额外组件就没有解决方案。如果
useSpring
为此返回了一个回调：
const{props，reanimate}=>useSpring（…）
。但这可能根本不可能。无论如何，您的解决方案已经足够好了。
import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={props}>I will fade in</animated.div>
}