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