reagieren js nuka Karussell benutzerdefinierte Pfeil Positionierung

Question

Ich versuche, benutzerdefinierte Pfeile mit der Nuka Karussell-Komponente korrekt zu positionieren. Ich habe die Dekorateure gemischt, aber meine Pfeile sind nebeneinander, wie arbeite ich daran? Ich möchte einen Pfeil in der Mitte links und einen Pfeil in der Mitte nach rechts.

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

hier ist ein Bild von dem, was ich habe, und ich möchte nicht, was

Answer 1

Zierer eine Reihe von Komponenten erfolgt.

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

hinzugefügt Optimierung zu reduzieren Zählung Rendering (hinzugefügt 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 
    } 
    } 
];