Question

我想使用ReactJS制作一个简单的股票代码。我想暂时突出价值变化。例如。如果它减少则显示红色1秒钟，如果增加则显示绿色，然后恢复为黑色。例如，当市场开放时，请参阅www.google.co.uk/finance。使用ReactJS实现此目的的简单方法是什么？

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

＆＃13;

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')
);

＆＃13;

<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>

＆＃13;

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

Answer 1

反应股票图表

创建高度可自定义的股票图表

使用React JS和d3构建

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

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

如何使用ReactJS暂时突出显示股票代码值变化？

1 个答案: