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

Question

我正在使用 reactstrap 构建我的 table 并且我正在使用 axios post 并从我的后端获取我的数据。

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

例如，如果单元格值小于 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>

这也是服务 table 的正确方式吗？还是我应该使用不同的东西？

Answer 1

您可以通过两种方式进行操作：

通过使用css class（推荐）：

<td key="Questions" className={(paa.Questions == 'value_to_compare') ? 'css_class': null}>{paa.Questions}</td>

通过使用条件样式：

 <td style={(paa.Questions == 'value_to_compare') ? {textAlign:'center'}: {}}></td>  // Here instead of textAlign:'center' you can use your style

Answer 2

只需使用三元运算符并传递 class 或

中的值

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

或

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

更新 3+ classes

我会在你有 if/else 或 switch 语句 return 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)}>

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

React: How to change Table cell background depending on cell value in React table

css

reactjs

react-table

reactstrap