Question

我需要更新CSS，当然我使用了jQuery，但我告诉他们不要在反应中使用jQuery。

我该如何正确地做到这一点。如果需要，我可以添加更多代码。我只是简单地切换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});
  }

Answer 1

您可以内联操作组件样式，并且可以根据状态变量给出条件。

示例

imwrite("10_iteration_blurring.bmp", image);

Answer 2

在做出反应时，有许多方法可以为组件设置样式，包括内联样式，在css和导入中定义样式，使用样式化组件以及使用一些小型JS库，例如： classnames。

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

只是一个简单的例子：

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

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

Answer 3

我建议在状态中使用变量引用内联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
...
}

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

3 个答案: