リアクション - カルーセルのRefへのアクセス

Question

私はちょうどReactの学習を開始し、画像スライド式カルーセルを作成しようとしています（http://kenwheeler.github.io/slick/）。画像を水平に並べて配置する場所にCSSを配置し、前後のカルーセルナビゲーションボタンを押したときに画像を水平にスクロールさせようとしています。

私の解決策は、.carousel__viewportオブジェクトにrefをJSX経由で添付し、this.refs.viewport.scrollLeftを使用してカルーセルを移動することです。カルーセルのナビゲーションボタンをクリックすると、が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

refを正しく設定していません。 strings as ref is legacy supportを使用してください。削除する可能性が高いため、使用しないでください。

あなたは、このように参照を設定することができます：あなたが提案して `this.viewport.scrollLeft = 150でREFにアクセスしていますように私は自分のコードを更新しました

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