在反应中改变值时使文本变为白色？反应弹簧？答案

【问题标题】：Make text become white upon changing value in react? React-spring?在反应中改变值时使文本变为白色？反应弹簧？
【发布时间】：2020-05-09 23:06:16
【问题描述】：

我有一个 div，包含球员得分、死亡和助攻：

    <div className="liveMatchPlayerScore">
      {data.kill_count}/{data.death_count}/{data.assists_count}
    </div>

每次击杀或死亡计数发生变化时，我希望文本变为粗体白色 3 秒。

我正在考虑为此使用 react-spring，特别是 useTransitions，但文档显示了使用项目数组的示例。我打算把每个分数放在一个数组中，但这似乎适得其反。

之前我尝试将分数包装在 react-spring 的“Spring”组件中，但这只会在初始渲染时对分数进行动画处理 - 而不是在更新时进行动画处理。

如何使kill_count 和death_count 在更改值后变为白色3 秒？

谢谢

我使用了@PeterAmbruzs 解决方案，但我似乎得到了奇怪的数字。例如在下面的图像中，首先分数是 0/0/0，第一个数字增加 1。它没有变成 1/0/0，而是变成了 01/0/0。出于某种原因，我的数字也高得离谱。有谁知道为什么会发生这种情况？

【问题讨论】：

使用 react-transition-group 怎么样？ (github.com/reactjs/react-transition-group/tree/v1-stable)
所以基本上使用 react-transition-group 我只需将杀死和死亡计数包装在 <CSSTransitionGroup> 中并指定我想要的更改？我似乎找不到颜色变化的值。
你可以使用 css 做基本的，当你收到 props 时更改类名
@mba3gar 你能更深入地解释一下吗？
让我给你看一个例子，首先确保你的数据已经在状态中注册，然后根据你的上下文或视图将每个元素包装在 ap 或 span 中，并根据它给它一个类名它是当前状态，例如 <p className={${this.state.count > 1} ？ blackColor : whiteColor }> </p>

标签： javascript css reactjs animation react-spring

【解决方案1】：

我也有解决办法。我认为这很简单。首先，您为动画数字创建一个组件。我将它包装在 react.memo 中，以便仅在其属性更改时更新它。你可以看到它是粗体的，一开始是红色的，但在 3 秒后它变成了正常的黑色。但是你可以随意改变风格。我添加了 skip 属性以防止动画，例如第一次渲染。

const FadeNumber = React.memo(({ value, skip }) => {
  const style = useSpring({
    from: { color: "red", fontWeight: "bold" },
    to: { color: "black", fontWeight: "normal" },
    delay: 3000
  });

  return (
    <animated.span style={{ margin: "10px", ...(skip ? {} : style) }}>
      {value}
    </animated.span>
  );
});

现在有一个技巧可以在属性更改时重新渲染动画。只需将值放入键中。当 key 改变时，会创建一个新的组件，所以动画会再次播放。我添加了一个独特的前缀来防止副作用。

<FadeNumber skip={kill === 0} key={"a" + kill} value={kill} />

还有整个例子：

https://codesandbox.io/s/react-spring-change-fade-out-j8ebk

【讨论】：

太棒了，有什么地方可以聊天，让我给你看更多我的代码吗？价值来自道具。我正在映射道具并从中提取 props.data.kill 或 props.data.death。我可以将值存储在一个变量中，但它不能将它存储在状态中，因为它在地图中，对吧？
对不起，今天不行。这里是深夜。但是您可以将属性用作值，无需从它们创建状态。
不用担心，我设法让它工作得很好。这很容易，非常感谢您提供的优雅解决方案！我有一个问题：当页面最初加载时，所有文本都是红色的。有没有办法阻止文本在初始加载时变成不同的颜色？谢谢！
太棒了！还有另一个副作用。页面上有多个 GameList 组件。每个都有一个 FadeNumber 组件。当发现新游戏时，我的网页会自动呈现新的 GameList 组件，而无需刷新页面。当一个新的 GameList 组件被渲染时，它会导致我的其他 GameList 组件移动，随后它们会改变颜色。你知道如何解决这个问题吗？谢谢！ PS - 随时查看网站。 www.dotatracker.com 让您自己看看！
也许有一个skip = {first} 类型的命令来跳过第一个道具更改。

【解决方案2】：

https://stackblitz.com/edit/react-5sztov?file=index.js

setTimeout() 仍然是一个可行的结构——即使在 React 中工作时也是如此。

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      assistsCount: 0,
      color: 'black',
      deathCount: 0,
      fontWeight: 'normal',
      killCount: 0,
      setStyleToReset: false,
    };
  }

  increaseKillCount () {
    this.setState((prevState, props) => {
      return {
        killCount: prevState.killCount + 1,
        color: 'white',
        fontWeight: 'bold',
        setStyleToReset: true,
      };
    });
  }

  render() {
    if (this.state.setStyleToReset) {
      this.resetStyle();
    }
    return (
      <div>
        <div style={{
          backgroundColor:'green',
        }}>
          <span style={{color:this.state.color, fontWeight:this.state.fontWeight}}>{this.state.killCount}</span>/{this.state.deathCount}/{this.state.assistsCount}
        </div>
        <button onClick={() => this.increaseKillCount()}>Increase Kill Count</button>
      </div>
    );
  }

  resetStyle() {
    setTimeout(() => {
      this.setState({
        color: 'black',
        fontWeight: 'normal',
      });
    }, 3000);
  }
}

render(<App />, document.getElementById('root'));

【讨论】：