如何“逆向工程”簡單反應組件到純jQuery

Question

此處的以下react組件：

http://engineering.kapost.com/2018/05/horizo​​ntal-react-component-slider/

react組件的工作示例： https : //codesandbox.io/s/nkm614n740?from-embed

我一直在嘗試找出如何將其轉換為簡化的jquery組件/函數，但是我無法繞開某些正在起作用的函數。

這是下面的完整代碼：

this.state = {
  marginLeft: 0,
};

renderLeftArrow = () => {
  if (this.state.marginLeft !== 0) {
    return (
      <button className="caret caret-left" onClick={this.handleLeftClicked}>
        {this.props.renderLeftArrow()}
      </button>
    );
  }
  return null;
 }

const remainingWidth = contentWidth - (sliderWidth) - currentMarginLeft;

handleLeftClicked = () => {
  const currentMarginLeft = this.state.marginLeft;
  const sliderWidth = this.slider.offsetWidth;
  let marginLeft;

  if (currentMarginLeft > sliderWidth) {
    marginLeft = currentMarginLeft - sliderWidth;
  } else {
    marginLeft = 0;
  }
   this.setState({ marginLeft });
 }

handleRightClicked = () => {
  const currentMarginLeft = this.state.marginLeft;
  const sliderWidth = this.slider.offsetWidth
  const contentWidth = this.sliderContent.offsetWidth;
  const remainingWidth = contentWidth - (sliderWidth - arrowWidth) - currentMarginLeft;
  let marginLeft;


  if (remainingWidth > 0) {
    if (remainingWidth <= sliderWidth) {
      marginLeft = currentMarginLeft + remainingWidth;
    } else {
      marginLeft = currentMarginLeft + sliderWidth;
    }
  } else {
    marginLeft = currentMarginLeft;
  }
  this.setState({ marginLeft });
 };

componentDidMount() {
 window.addEventListener('resize', this.handleResize());
 this.resetMargin();
}

componentWillUnmount() {
 window.removeEventListener('resize', this.handleResize());
}

到目前為止，下面是我能夠對它進行“逆向工程”時能夠實現的目標。 看起來有點奏效，但可以使用一些指針...

也在JSfiddle中

 $(".nav-menu").css('margin-left', '0px'); var navWrapper = $("#js-nav-menu-wrapper"), sliderWidth = navWrapper.outerWidth(), contentWidth = navWrapper.children('.nav-menu').outerWidth(), currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')), remainingWidth, setMargin; var updateSlider = function() { if ('#js-nav-menu-wrapper') { sliderWidth = navWrapper.outerWidth(); contentWidth = navWrapper.children('.nav-menu').outerWidth(); currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')); remainingWidth = contentWidth - sliderWidth - currentMarginLeft; console.log(remainingWidth); return this; } else { navWrapper.children('.nav-menu').css('margin-left', '0px'); } }; var navMenuScrollRight = function() { updateSlider(); if (currentMarginLeft > sliderWidth) { setMargin = currentMarginLeft - sliderWidth; } else { setMargin = 0; } navWrapper.children('.nav-menu').css({ marginLeft: setMargin }); }; var navMenuScrollLeft = function() { updateSlider(); if (remainingWidth > 0) { if (remainingWidth <= sliderWidth) { setMargin = currentMarginLeft + remainingWidth; } else { setMargin = currentMarginLeft + sliderWidth; } } else { setMargin = currentMarginLeft; } navWrapper.children('.nav-menu').css({ marginLeft: setMargin }); }; $('#js-scroll-right').click(function() { navMenuScrollRight(); event.preventDefault(); }); $('#js-scroll-left').click(function() { navMenuScrollLeft(); event.preventDefault(); }); 

 .main-menu { flex: 1; display: flex; align-items: stretch; overflow: initial; -ms-overflow-style: -ms-autohiding-scrollbar; transition: 1s all; } .nav-menu-wrapper { -webkit-box-flex: 0; -ms-flex: 0 1 100%; display: flex; flex: 0 1 100%; width: 0; overflow: hidden; } .nav-menu { margin: 0; padding: 0; display: flex; flex-direction: row; align-items: stretch; -ms-flex: 0 1 100%; flex: 0 1 100%; transition: margin 0.5s ease-out 0s; list-style: none; } .nav-menu li { display: inline-flex; align-items: center; padding: 1rem; min-width: 100px; border: 1px solid #f3f3f3; } .nav-padel-left, .nav-padel-right { display: flex; align-items: center; justify-content: center; min-width:50px; border: 1px solid; background-color: skyblue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-menu"> <div id="js-scroll-left" class="nav-padel-left"><<</div> <div id="js-nav-menu-wrapper" class="nav-menu-wrapper"> <ul class="nav-menu js-nav-built" style="margin-left: 0px;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> <li>Item 13</li> <li>Item 14</li> <li>Item 15</li> </ul> </div> <div id="js-scroll-right" class="nav-padel-left">>></div> </div> 

Answer 1

好的，所以在我修正的某些點上，您的邏輯已經顛倒了。 一些注意事項：

• 我不確定if ('#js-nav-menu-wrapper') {應該怎么做，但它始終會評估為true。 如果由於某些原因您確實要檢查此內容，請重新檢查。

• 大多數初始化變量都是不必要的，因為它們將在第一次updateSlider獲得其值的設置

這不是完整版本，要完成操作，您應該在兩邊最大數量時隱藏箭頭，而在超出極限時再次顯示它們。

$(".nav-menu").css('margin-left', '0px');
var navWrapper = $("#js-nav-menu-wrapper"),
  sliderWidth = navWrapper.outerWidth(),
  contentWidth = navWrapper.children('.nav-menu').outerWidth(),
  currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left')),
  setMargin;

var max = (navWrapper.children('.nav-menu').outerWidth() - sliderWidth) * -1;

var updateSlider = function() {
  sliderWidth = navWrapper.outerWidth();
  contentWidth = navWrapper.children('.nav-menu').outerWidth();
  currentMarginLeft = parseFloat(navWrapper.children('.nav-menu').css('margin-left'));
};

var navMenuScrollRight = function() {

  updateSlider();

  if (currentMarginLeft * -1 + sliderWidth < contentWidth ) {
    setMargin = Math.max(currentMarginLeft - sliderWidth, max);
  } else {
    setMargin = currentMarginLeft;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};

var navMenuScrollLeft = function() {

  updateSlider();

  if (currentMarginLeft < 0) {
    setMargin = Math.min(currentMarginLeft + sliderWidth, 0);
  } else {
    setMargin = currentMarginLeft;
  }

  navWrapper.children('.nav-menu').css({
    marginLeft: setMargin
  });

};


$('#js-scroll-right').click(function(e) {

  navMenuScrollRight();

  e.preventDefault();
});

$('#js-scroll-left').click(function(e) {

  navMenuScrollLeft();

  e.preventDefault();
});

從這里不應該很難完成。 祝好運

鏈接到小提琴：