React：如何根据React表中的单元格值更改表单元格背景

debugcn 发表于 Dev

Sundios

我正在使用reactstrap来构建我的表，而我正在使用axios来发布并从后端获取我的数据。

我希望能够根据单元格的值更改单元格（）的背景颜色。

例如，如果单元格值小于0.25，则背景绿色如果单元格值小于0，则背景红色。

我当前的代码如下所示：


//Input sending data and Calling API back
  state ={
  data: []
}
//this gets triggered on line 85
  search = e => {
    e.preventDefault();
    //Here we send the input that we add on line 90 value to Flask
    axios.post("/results",{search_question: document.getElementById("buscar").value})
    //Then we call it back
    .then((res) => {
      // console.log(res.data)
      //We create data variable with our returned data
      const data = res.data
      //Empty variable to pass all values from data
      const question = []
      // for loop that goes into data and pused everything to questions variable.
      for(var i in data)
        {question.push(data[i])}
      //console log to make sure our API returned the correct data and we saved in question
      console.log(question)
      //creating the state of paa and selecting the second index in question
      this.setState({paas:question[1]})

    })
     

    }

render() {

    //empty variable and set is a state
    const{paas = []} = this.state
    return (

<Table>
                    <thead>
                      <tr>
                        <th>Question</th>
                        <th>Sentiment</th>
                        <th>Magnitud</th> 
                      </tr>
                    </thead>
                    <tbody>

                {paas.length ? paas.map(paa => (
                  
                    <tr>
                      <td key="Questions" style= {{}}>{paa.Questions}</td> 
                      <td key="Sentiment">{paa.Sentiment}</td>
                      <td key="Magnitud"> {paa.Magnitud}</td>
                    </tr>
                   
                  ))
                :
                (<p> </p>)
                  
                      }
                       </tbody>
                 </Table>) }
      </Container>
  </div>

这也是摆桌子的正确方法吗？还是我应该使用其他东西？

杰森·麦克法兰

只需使用三元运算符并在其中传递类或值

<td key="Questions" className={value > 0.25 ? 'greenclass' : 'redclass' }>

要么

<td key="Questions" styles={{ background: value > 0.25 ? 'green' : 'red' }}>

更新3个以上的班级

我会在一个if / else或switch语句返回className的地方使用外部函数

在渲染器之外具有此功能

resolveClass = (value) => {
    let className = ''

    switch (true) {
        case (value > 0.25):
            className = 'green'
            break;
        case (value < 0):
            className = 'red'
            break;
        default:
            break
    }

    return className
}

然后在渲染中 <td key="Questions" className={resolveClass(paa.Questions)}>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。