React - 訪問輪播的Ref

我剛開始學習React，並試圖創建一個圖像滑動輪播（如下所示：http://kenwheeler.github.io/slick/）。我有我的CSS在水平方向平鋪圖像的位置，我試圖在按下上一個和下一個輪播導航按鈕時使圖像水平滾動。React - 訪問輪播的Ref

我的解決方案是通過JSX將ref附加到我的.carousel__viewport對象上，並使用this.refs.viewport.scrollLeft移動傳送帶。當我點擊旋轉木馬導航按鈕時，我確實看到console.log()以undefined返回，並且視窗不滾動。使用Chrome調試器檢查我的應用程序時，我突出顯示了.carousel__viewport元素，並驗證$0.leftScroll = 150;確實水平滾動圖像。

我應該怎麼做才能使視口滾動X個像素？

// carousel.js 

'use strict'; 

var React = require('react'); 
var Slide = require('./slide'); 

class Carousel extends React.Component { 

    constructor(props, context) { 
     super(props, context); 
    } 

    renderSlide(image, index) { 
     return (
      <Slide key={index} image={image} /> 
     ); 
    }; 

    navClick(direction) { 
     console.log(this.viewport); 
     this.viewport.scrollLeft = 150; // carousel viewport not scrolling  
    }; 

    render() { 
     return (
      <div className="carousel"> 
       <div className="carousel__viewport" ref={r => this.viewport = r}> 
        {this.props.images.map(this.renderSlide)} 
       </div> 

       <span className="carousel__previous" onClick={() => this.navClick('left')}>Previous</span> 
       <br /> 
       <span className="carousel__next" onClick={() => this.navClick('right')}>Next</span> 
      </div> 
     ); 
    } 
}; 

Carousel.propTypes = { 
    images: React.PropTypes.array.isRequired 
}; 

module.exports = Carousel; 

-----  

/* carousel.less */ 
.carousel { 
    width: 100%; 

    &__viewport { 
    display: flex; 
    overflow: hidden; 
    } 
}

來源

2017-07-31 Jon

您沒有正確設置ref。使用strings as ref is legacy support，不應使用，因爲它可能會被刪除。

您可以設置這樣的裁判：

<div className="carousel__viewport" ref={r => this.viewport = r}>

來源

2017-07-31 15:34:49 T4rk1n

我已經更新了我的代碼如你所說，並感到'this.viewport.scrollLeft = 150訪問裁判;'但是我仍然沒有看到旋轉木馬滾動。我在我的帖子中更新了我的代碼以反映這些更改。 – Jon

React - 訪問輪播的Ref

回答

相關問題