反应js nuka轮播自定义箭头定位

Question

Im trying to correctly position custom arrows with the nuka carousel component. I mixed in the decorators but both of my arrows are side by side, how do i work around this? I want an arrow on the center left, and an arrow center right.

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

here is an image of what i have and what i dont want

Answer 1

Decorators takes an array of components.

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

Added optimization to reduce rendering count (added 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
    }
  }
];