如何使用ReactJS临时突出显示股票行情的变化？

Question

我想用ReactJS做一个简单的股票报价器。我想暂时强调一下值的变化。例如，如果价格下降，则显示红色1秒，如果价格增加，则显示绿色，然后恢复为黑色。例如，当市场开放时，请参阅www.google.co.uk/finance。使用ReactJS实现这一点的简单方法是什么？

下面的代码在每次价格变化后更新颜色，但更新是永久性的，而不是临时的。

​

class StockTicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {price: 1, lastPrice : 1};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      2000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      price:  Math.floor(Math.random() * 200+200), lastPrice: this.state.price 
    });
  }
  
  change() {
    if(this.state.price > this.state.lastPrice){
      return "green";
    }else  if(this.state.price < this.state.lastPrice){
      return "red";
    }else{
      return "black";
    }
  }

  render() {
    return (
      <div>
     
        <h2 className={this.change()}> {this.state.price}</h2>
      </div>
    );
  }
}



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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

​

它可以在代码中运行：http://codepen.io/anon/pen/pNMLYN

Answer 1

React股票图表

创建高度可定制的股票图表

使用React JS和d3构建

演示：http://rrag.github.io/react-stockcharts/

源代码：https://github.com/rrag/react-stockcharts