Javascript 添加CSS类以在fetch中更新时响应DOM元素

我正在组装一个加密货币应用程序作为实验，并从API中提取数据。我已经成功地让所有数据显示得很好，并且每两秒钟搜索一次价格变化，但是我想在价格变化时临时向更新的DOM元素添加一个类，如果价格下降，则为红色，如果价格上升，则为绿色。我目前正在映射API中的每个项，只希望将所需的类添加到DOM中更新的项（货币）中。不是所有的项目

请参阅下面我的代码：

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
导入“/home.scss”；
类Home扩展组件{
//创建初始状态并传递道具
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
硬币：[]
}
}
//自定义获取数据方法
fetchData（）{
//获取数据
取（'http://coincap.io/front')
//将响应转换为JSON
.then（response=>response.json（））
//获取parsedJSON并记录结果
//为每个用户创建单个对象
.then（parsedJSON=>parsedJSON.map（coin=>(
{
long:`${coin.long}`，
short:`${coin.short}`，
价格：`${coin.price}`
}
)))
//用新联系人覆盖空阵列
//将数组设置为contacts状态，并将isLoading设置为false
.然后（硬币=>{
这是我的国家({
硬币，
孤岛加载：false
})
})
//抓住错误
.catch（错误=>console.log（'解析失败'，错误））
}
componentDidMount（）{
设置间隔（（）=>{
这是fetchData（）；
console.log（'refreshed'）；
}, 2000);
}
render（）{
const{isLoading，coins}=this.state；
返回(
{
！isLoading&&coins.length>0
？硬币。地图（硬币=>{
//销毁let变量中的每个项
让{long，short，price}=硬币；
返回(
名称：{long}

短：{Short}

价格：${Price}

观景币
);
})
：null}
);
}
}
导出默认主页如果您制作了一个
组件，这样您就可以跟踪
组件中的更改，从而将收到道具
并管理每个硬币的状态，这可能会更容易

试着这样做：

class Coin extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
       color: grey,
    };
  }

  componentWillReceiveProps(newProps) {
    if (this.props.price > newProps.price) {
      this.setState({ color: 'red' });
    } else if (this.props.price < newProps.price) {
      this.setState({ color: 'green' });
    } else {
      this.setState({ color: 'grey' });
    }
  }

  render() {
    const { long, short, price } = this.props;
    return (
       <div className={`panel__item ${this.state.color}`} key={short}>
         <p>Name: {long}</p>
         <p>Short: {short}</p>
         <p>Price: ${price}</p>
         <Link className="button" to={`/${short}`}>
            View Coin
         </Link>
       </div>
     );  
  }
}

class.Component{
建造师（道具）{
超级（道具）；
此.state={
颜色：灰色，
};
}
组件将接收道具（新道具）{
如果（this.props.price>newProps.price）{
this.setState（{color:'red'}）；
}else if（this.props.price
短：{Short}

价格：${Price}

观景币
);  
}
}

然后在
映射中调用这个组件
并将变量作为道具传递。
谢谢Max，我已经创建了一个新组件并传递了道具。似乎显示正确，但不幸的是，该类保持灰色，从未更改。我应该在父文件中运行componentWillReceiveProps吗？只是个主意。谢谢，我不知道你的意思。每当硬币收到新道具时，componentWillReceiveProps将自动调用。它应该在硬币部分中定义。如果这不起作用，请在console.log中记录newProps和this.props。看起来参数应该是nextProps而不是newProps（），我已经更改了这个，但仍然没有乐趣。控制台日志消息没有出现，这使我认为它没有被触发。参数的名称不应该有什么区别。您确定要将price变量作为道具传递给Coin吗？我使用了以下方法：我可以在控制台中看到dom更新，但没有日志消息。价值观似乎很好。