Javascript 检查div值并更新React中的类

它将成为应用程序仪表板的一部分。它将从API接收一个字符串形式的数字，这部分仍有待实现。可能是在

onComponentDidMount

上调用了

axios

我想根据数字文本的值设置特定颜色的数字文本。我在页面加载和更改时读取数值，然后设置引导类。我正在用

React

开发离子电池

this.state = {
    warningColor: true
}

componentDidMount() {
    var delayed: HTMLElement | null = document.querySelector("#delayed");
    if (delayed != null && delayed.textContent === "0") {
        this.setState({ warningColor: false })
    }
}

handleAlerts() {
    var delayed: HTMLElement | null = document.querySelector("#alert");
    if (delayed != null && delayed.textContent == "0") {
        this.setState({ warningColor: false })
    } else {
        this.setState({ warningColor: true })
    }
}

<div id="alert" className={"number " + (this.state.warningColor ? "text-warning" : "text-success")} onChange={this.handleAlerts}>0</div>

this.state={
警告颜色：真的
}
componentDidMount（）{
var delayed:HTMLElement | null=document.querySelector（“延迟”）；
if（延迟！=null&&delayed.textContent==“0”）{
this.setState（{warningColor:false}）
}
}
手工艺品（）{
var delayed:HTMLElement | null=document.querySelector（“警报”）；
if（延迟！=null&&delayed.textContent==“0”）{
this.setState（{warningColor:false}）
}否则{
this.setState（{warningColor:true}）
}
}
0

是否有更好/更干净的方法来检查值并在

div

中设置类？

以反应方式，1）避免使用querySelector和fetch值，2）在render方法中设置条件。像这样的怎么样。希望这有帮助

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 (<div id="alert" className={alertClass} onChange={this.handleAlerts}>{alertText}</div>)
}

this.state={
aletText:0
}
componentDidMount（）{
//必要时更改状态（alertText或其他delayedText）
}
手工艺品（）{
//必要时更改状态（alertText或其他delayedText）
}
render（）{
const{alertText}=this.state；
//如果需要delayedText，请存储在状态并在此处添加条件
var alertClass=“number”+（alertText！==0？“文本警告”：“文本成功”）；
返回（{alertText}）
}

更改发生在哪里？你不能设置值抛出状态吗

this.state={warningColor:true，alerVal:0}

并在更改时更改状态？警报的数量将在何时更改？这里有一个静态

0

；应用程序的其他部分是否会执行警报。textContent=“X”？在更改时调用

onChange

？这似乎很不雅观；警报的数量应作为道具传递给组件。静态值

0

，您不能在应用程序状态下管理它吗？