Javascript --如何在React组件中转换jQuery代码？

我需要更新CSS，当然我使用了jQuery，但是我被告知不要将jQuery与React一起使用

我该如何正确地做到这一点。如果需要，我可以添加更多代码。我只是在切换div的下边框

  toggleMarker () {
    if (this.state.previous && (this.state.current !== this.state.previous)) {
      $('#nav_' + this.state.previous).css("border-bottom", '');
    }
    if (this.state.previous !== this.state.current) {
      $('#nav_' + this.state.current).css("border-bottom", this.color);
    }
    this.setState({previous: this.state.current});
  }

---

可以内联操作组件样式，也可以根据状态变量提供条件

示例

 render(){
    return(
        <div style={{ borderBottom: ((this.state.previous && (this.state.current !== this.state.previous)) ? 'none' : 1) }}>
            // ...
        </div>
   )
}

render（）{
返回(
// ...
)
}

当涉及到响应时，有很多方法可以设置组件的样式，包括内联样式、在css中定义样式和导入、使用样式化组件以及使用一些小型JS库，例如

classnames支持任何JS表达式作为HTML元素的类名。您可以使用上面的链接探索更多内容

举个简单的例子：

import styles from './yourcss.css'
import { classnames } from './classnames/bind'
const cx = classnames.bind(styles)

<div className={cx('divStyle')}>
</div>

从“./yourcss.css”导入样式
从“./classnames/bind”导入{classnames}
const cx=classnames.bind（样式）

我建议在state中使用带有引用from变量的内联CSS。考虑这个，

//define state
this.state={
    toggleState : false}

//have toggler function   
togglerFunction(){
    var temp = this.state.toggleState
    this.setState({
         toggleState : !temp})
}

//in render you can have your element like this
render(){
...
//start of your element suppose a div
{this.state.toggleState == false ? <div style=        
{{borderBottom:"YourValueForFalseHere"}}></div>:<div style=                
{{borderBottom:"YourValueForTrueHere"}}></div>}
//...End of your element
...
}

//定义状态
这个州={
toggleState:false}
//具有切换功能
togglerFunction（）{
var temp=this.state.toggleState
这是我的国家({
toggleState:！temp}）
}
//在渲染中，您可以使用如下元素
render（）{
...
//假设一个div作为元素的开始
{this.state.toggleState==false？：}
//…你的元素结束了
...
}

您给出了哪些不使用jquery的原因？