反應js nuka傳送帶自定義箭頭定位

Question

我試圖正確定位自定義箭頭與nuka傳送帶組件。我在裝飾者混合，但我的箭頭是並排的，我如何解決這個問題？我想要一個箭頭在中心左邊，箭頭在右邊。

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

裝飾採用組件的數組。

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 
    } 
    } 
]; 

新增的優化，以減少渲染計數（加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 
    } 
    } 
];