javascript - jquery 样式在 react 组件中不起作用

Question

jQuery 似乎在 react 组件中工作正常，但是，当我尝试在 react 组件中使用 jquery 应用样式时，它不起作用。在下面的代码中，每个循环中的 console.log(eachVisitedTopic) 都按预期返回正确的结果。

topicsVisited(arr){
     $(function() {
      $.each(arr, function(key, eachVisitedTopic) {
        console.log(eachVisitedTopic);
        $('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({
          'background-color': 'red'
        });
      });
    });
  };

标记

import {React, ReactDOM} from '../../../../build/react';

export default class SingleTopicBox extends React.Component {
  render() {
    return (
      <div>
        <div className="col-sm-2">
          <div className="single-topic" data-topic-id={this.props.topicID} onClick={() => this.props.onClick(this.props.topicID)}>
            {this.props.label}
            {this.props.topicID}
          </div>
        </div>
      </div>
    );
  }
};

Answer 1

React 应该处理所有渲染，它检查脏 dom 并只渲染发生变化的东西。

你可以实现你想要的，只需使用一个 react 状态。当您触发 setState 更改时，React 将查看 DOM 并找到更改的内容，然后呈现它。

引用:https://facebook.github.io/react/docs/component-api.html#setstate

constructor() {
        super();
        this.state = {
            bgDisplayColor: "blue"
        };
    }  

然后你可以在你的组件中做这样的事情:

$('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({
          'background-color': this.state.bgDisplayColor
        });

要更新它，您只需使用:

this.setState({bgDisplayColor: "red"});

编辑

要解决 undefined variable 错误，您必须在函数中存储“this”的范围并使用而不是“this”，因为在 jquery .css 中“this”指的是 Jquery 而不是“this”范围你实际类(class)的。

例子:

topicsVisited(arr){
   var self = this;
   $(function(){
      $.each(arr, function(key, eachVisitedTopic){
         console.log(eachVisitedTopic);
         //self here is the global scope of your class
         //Inside jQuery.css this refers to Jquery and not to your class.
         $('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({
                  'background-color': self.state.bgDisplayColor
                });
        });
      });
    });
  };