反応するjsヌーカカルーセルカスタム矢印の配置

Question

ヌークのカルーセルコンポーネントでカスタムの矢印を正しく配置しようとしています。私はデコレータで混在していますが、私の矢印の両方が並んでいます。どうすればこの問題を回避できますか？私は左の中心に矢印を、右に矢印の中心を求めます。ここ

var Decorators = [{ 
    component: React.createClass({ 
    render() { 
     return (
     <div> 
      <i className="fa fa-chevron-circle-left fa-3x" 
      onClick={this.props.previousSlide} aria-hidden="true"></i> 
      <i className="fa fa-chevron-circle-right fa-3x" 
      onClick={this.props.nextSlide} aria-hidden="true"></i> 
      </div> 
    ) 
    } 
    }), 
    position: 'CenterLeft', 
    style: { 
    padding: 20 
    } 
}]; 

私が持っているものの画像であると私はいけないをしたい

Answer 1

は、デコレータは、コンポーネントの配列をとります。数（追加shouldComponentUpdate）

var Decorators = [ 
    { 
    component: React.createClass({ 

     shouldComponentUpdate(nextProps, nextState) { 
      return this.props.currentSlide !== nextProps.currentSlide; 
     }, 

     render() { 
     return (
      <div> 
      <i className="fa fa-chevron-circle-left fa-3x" onClick={this.props.previousSlide} aria-hidden="true"></i> 
      </div> 
     ) 
     } 
    }), 
    position: 'CenterLeft', 
    style: { 
     padding: 20 
    } 
    }, 
    { 
    component: React.createClass({ 

     shouldComponentUpdate(nextProps, nextState) { 
      return this.props.currentSlide !== nextProps.currentSlide; 
     }, 

     render() { 
     return (
      <div> 
      <i className="fa fa-chevron-circle-right fa-3x" onClick={this.props.nextSlide} aria-hidden="true"></i> 
      </div> 
     ) 
     } 
    }), 
    position: 'CenterRight', 
    style: { 
     padding: 20 
    } 
    } 
]; 

のレンダリングを削減する

var Decorators = [ 
    { 
    component: React.createClass({ 
     render() { 
     return (
      <div> 
      <i className="fa fa-chevron-circle-left fa-3x" onClick={this.props.previousSlide} aria-hidden="true"></i> 
      </div> 
     ) 
     } 
    }), 
    position: 'CenterLeft', 
    style: { 
     padding: 20 
    } 
    }, 
    { 
    component: React.createClass({ 
     render() { 
     return (
      <div> 
      <i className="fa fa-chevron-circle-right fa-3x" onClick={this.props.nextSlide} aria-hidden="true"></i> 
      </div> 
     ) 
     } 
    }), 
    position: 'CenterRight', 
    style: { 
     padding: 20 
    } 
    } 
]; 

追加の最適化