Это будет частью приложения Dashboard. Он получит число в виде строки от API, эта часть еще не реализована. Вероятно, вызов onComponentDidMount в onComponentDidMount .

Я хочу установить некоторый числовой текст в определенный цвет в зависимости от его значения. Я читаю onChange значение при загрузке страницы и onChange , затем устанавливаю класс начальной загрузки. Я развиваюсь в Ionic с React .

 this.state = { warningColor: true } componentDidMount() { var delayed: HTMLElement | null = document.querySelector("#delayed"); if (delayed != null {amp}amp;{amp}amp; delayed.textContent === "0") { this.setState({ warningColor: false }) } } handleAlerts() { var delayed: HTMLElement | null = document.querySelector("#alert"); if (delayed != null {amp}amp;{amp}amp; delayed.textContent == "0") { this.setState({ warningColor: false }) } else { this.setState({ warningColor: true }) } } {amp}lt;div id="alert" className={"number "   (this.state.warningColor ? "text-warning" : "text-success")} onChange={this.handleAlerts}{amp}gt;0{amp}lt;/div{amp}gt; 

Есть ли лучший / более чистый способ проверить значение и установить класс в div ?

Реактивно, 1) избегайте использования querySelector и выборки значений и 2) используйте ваши условия в методе рендеринга. Как насчет этого? Надеюсь это поможет.

 this.state = { aletText: 0 } componentDidMount() { // change state (alertText or other delayedText) if required } handleAlerts() { // change state (alertText or other delayedText) if required } render() { const { alertText } = this.state; // if required with delayedText, store in state and add condition here var alertClass = "number "   (alertText !== 0 ? "text-warning" : "text-success") ; return ({amp}lt;div id="alert" className={alertClass} onChange={this.handleAlerts}{amp}gt;{alertText}{amp}lt;/div{amp}gt;) }