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

回答

相关问题