Реагировать Nuka слайдер, где положить декоратор?

Question

Я новый, чтобы реагировать и пытаться изменить изображение стрелки карусели. В документе говорится, что я могу изменить предыдущий, следующий значок с декоратором. Однако я не знаю, где его использовать.

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

У кого-нибудь есть пример кода для этого?

Answer 1

На компоненте карусели есть свойство «декораторов»; установить его в пользовательский декораторов массив, созданный, как это:

<Carousel decorators={Decorators}>...</Carousel> 

Полный пример

'use strict'; 

    var React = require('react'); 

    var Carousel = require('nuka-carousel'); 

    const App = React.createClass({ 
     mixins: [Carousel.ControllerMixin], 
     render() { 

    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 
     } 
    }]; 
     return (
      <Carousel decorators={Decorators}> 
      <div>Slide 1</div> 
      <div>Slide 2</div> 
      <div>Slide 3</div> 
      </Carousel> 
     ) 
     } 
    }); 

    module.exports = App;