2
Ich möchte mit ReactJS einen einfachen Börsenticker erstellen. Ich möchte Wertänderungen vorübergehend hervorheben. Z.B. Zeigen Sie den Preis für 1 Sekunde rot, wenn er sich verringert, und grün, wenn er sich erhöht, und dann wieder schwarz. Siehe zum Beispiel www.google.co.uk/finance, wenn die Märkte geöffnet sind. Was ist ein einfacher Weg dies mit ReactJS zu erreichen?Wie temporär Ticker Wertänderungen mit ReactJS hervorheben?
Der folgende Code aktualisiert die Farbe nach jeder Preisänderung, aber das Update ist permanent, nicht vorübergehend.
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>Es kann in codepen ausgeführt werden: mit React http://codepen.io/anon/pen/pNMLYN
Willkommen bei Stackoverflow! Bitte lesen Sie [Wie stelle ich eine gute Frage?] (Http://stackoverflow.com/help/how-to-ask) –
Ich glaube nicht, Reactjs ist das Ding hier, sieht aus wie normale CSS zu mir :). Bitte teile etwas Code, wenn du konstruktive Antworten erwartest! :) –