Question

我已经在jquery中进行了编码，以找到该类及其子级来创建timelime。我想做同样的事情React。 jQuery代码如下..预先感谢

下面是jquery的工作代码。.如何在React中做同样的事情。

jQuery(document).ready(function($){
var timelines = $('#trip-timeline0'),
      eventsMinDistance = 120;
      //alert(timelines);
    (timelines.length > 0) && initTimeline(timelines);

    function initTimeline(timelines) {
      timelines.each(function(){
        var timeline = $(this),
          timelineComponents = {};

        //cache timeline components 
        timelineComponents['timelineWrapper'] = timeline.find('.events-wrapper');
        timelineComponents['eventsWrapper'] = timelineComponents['timelineWrapper'].children('.events');
        timelineComponents['fillingLine'] = timelineComponents['eventsWrapper'].children('.filling-line');
        timelineComponents['timelineEvents'] = timelineComponents['eventsWrapper'].find('a');
        timelineComponents['timelineDates'] = parseDate(timelineComponents['timelineEvents']);
        timelineComponents['eventsMinLapse'] = minLapse(timelineComponents['timelineDates']);
        timelineComponents['timelineNavigation'] = timeline.find('.cd-timeline-navigation');
        timelineComponents['eventsContent'] = timeline.children('.events-content');

        //assign a left postion to the single events along the timeline
        setDatePosition(timelineComponents, eventsMinDistance);
        //assign a width to the timeline
        var timelineTotWidth = setTimelineWidth(timelineComponents, eventsMinDistance);
        //the timeline has been initialize - show it
        timeline.addClass('loaded');

      });
    }
});

以及到目前为止我在React中拥有的东西

componentDidMount() {
  var tripline = 'document.getElementById("trip-timeline1")';
  var eventsMinDistance = 50;
  //alert(tripline.length);
  //console.log("Not k",tripline.length,"--",tripline);

  if(tripline.length  > 0){
    iniTripline(tripline, eventsMinDistance); 
    }


  function iniTripline(tripline, eventsMinDistance){

      var triplineComponents = {};
      //cache tripline components 
      triplineComponents['triplineWrapper'] = document.querySelector('.events-wrapper');
      triplineComponents['eventsWrapper'] = document.querySelector('.events');

}
}

如何在React中转换相同内容...

Answer 1

您需要添加

shouldComponentUpdate(){
return false;
}

它将停止重新呈现组件，并让JQuery接管控件。但是，如果您需要在第一次挂载后使用react功能，则必须强制重新渲染（“ this.forceUpdate（）”将跳过“ shouldComponentUpdate（）”）然后，您可以将代码添加到componentDidMount中。

如何在React.js中实现这个jQuery代码

1 个答案: