Question

jQuery似乎在反应组件中运行良好但是，当我尝试在反应组件中使用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并仅渲染更改的内容。

你可以实现你想要的，只需使用反应状态。当您触发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"});

修改

要解决未定义的变量错误，您必须存储＆＃34;此＆＃34;的范围。在你的函数中使用而不是＆＃34;这个＆＃34;，因为在jquery .css＆＃34;这个＆＃34;指的是Jquery而不是＆＃34;这个＆＃34;实际课程的范围。

示例：

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 }); }); }); }); };

Answer 2

通过将所有jQuery代码放在componentDidMount中来尝试例如：

      componentDidMount() {
         //Your jQuery function goes here 
      }

jquery样式不在react组件中工作

2 个答案: