Question

我刚刚开始学习React，我正在尝试创建一个图像滑动轮播（类似这样：http://kenwheeler.github.io/slick/）。我将CSS放在水平平铺图像的位置，并且当按下上一个和下一个旋转木马导航按钮时，我试图使图像水平滚动。

我的解决方案是通过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;
  }
}

Answer 1

您没有正确设置参考号。使用strings as ref is legacy support并且不应该使用它，因为它可能会被删除。

您可以像这样设置ref：

client.DefaultRequestHeaders.Authorization

React - 访问转盘参考

1 个答案: