Question

我正在尝试构建一个无限的滑块。

当我滚动滑块时，最后克隆的项目按预期显示，但滑块停止。我想继续无限滚动，此滑块应始终具有另一个滚动项。

这是我的构造函数中的“ rails”数组，它们是导入的组件：

import MusicRail from '../../components/MusicRail';
import GamesRail from '../../components/GamesRail';
import MoviesRail from '../../components/MoviesRail';

constructor(props) {
   super(props);

   this.state = {
      indexX: 0,
      indexY: 1
   }

   this.rails = [
      MusicRail,
     GamesRail,
     MoviesRail
  ]
}

然后在克隆第一个和最后一个项目以追加到数组的第一个和最后一个位置之后，我将更新轨道。

let rails = this.rails;
let firstObject = this.rails[0];
let lastObject = this.rails.slice(-1)[0];
this.rails = [lastObject, ...rails, firstObject];

这是我的onMoveVertical函数-方向绑定到下面的另一个函数setupKeys：

onMoveVertical(direction) {
    if(!this.state.active || this.state.profileMenu.active) return;

    const moveLocal = (direction) => {
      let {indexY} = this.state;
      indexY = (direction === 'UP') ? (indexY === 0) ? 0 : indexY - 1 : (indexY < this.rails.length-1 ) ? indexY + 1 : this.rails.length-1;

      this.setState({
        indexY,
      });
    };

    const activeComponent = this[`${this.className}-${this.state.indexY}`];
    if(activeComponent && activeComponent.onMoveVertical) {
      const canMove = activeComponent.onMoveVertical(direction);

      if(!canMove) {
        moveLocal(direction);
      }
    } else {
      moveLocal(direction);
    }

  }

setupKeys函数：

setupKeys() {
    key('up', this.keyScope, this.onMoveVertical.bind(this, 'UP'));
    key('down', this.keyScope, this.onMoveVertical.bind(this, 'DOWN'));
  }

Answer 1

尝试将this.rails移入状态。当属性仅位于此对象上时，更新其值不会导致渲染被调用，因此视图也不会更新。

React JS Infinite滑块问题

1 个答案: