反应js nuka carousel自定义箭头定位

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