2
我想使用ReactJS製作一個簡單的股票報價器。我想暫時突出顯示價值變化。例如。如果價格下跌，則顯示紅色的價格爲1秒，如果價格上漲，則顯示爲綠色，然後恢復爲黑色。例如，市場開放時見www.google.co.uk/finance。使用ReactJS實現這一點的簡單方法是什麼？如何使用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>它可以codepen運行： http://codepen.io/anon/pen/pNMLYN
歡迎計算器！請閱讀[我如何問一個好問題？]（http://stackoverflow.com/help/how-to-ask） –
我不認爲Reactjs是這裏的東西，看起來像普通的CSS對我:)。請分享一些代碼，如果你期望建設性的答案！ :) –