reactjs - Nuka-旋转木马自定义箭头按钮

Question

我是 Nuka-carousel React 的新手。我正在尝试添加上一个-下一个箭头按钮，而不仅仅是“上一个”和“下一个”书面按钮。我找到了编写装饰器函数的各种解决方案。我已经尝试过，但没有找到我想要的输出。这是我的代码:

import Carousel from 'nuka-carousel';
import createReactClass from 'create-react-class';
var Decorators = [
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-left" onClick={this.props.previousSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterLeft',
        style: {
            padding: 20
        }
    },
    {
        component: createReactClass({
            render() {
                return (
                    <div>
                        <i className="fa fa-arrow-right" onClick={this.props.nextSlide} aria-hidden="true"></i>
                    </div>
                )
            }
        }),
        position: 'CenterRight',
        style: {
            padding: 20
        }
    }
];

return(
    <Carousel decortators={Decorators} slidesToShow={3} cellSpacing={50} >
        {cards}
    </Carousel>

);

Answer 1

我相信你需要设置render*Controls Carousel 组件的 prop(其中 * 是特定的控制位置，例如 CenterLeft 或 CenterRight):

<Carousel
  renderCenterLeftControls={({ previousSlide }) => (
    <button onClick={previousSlide}>
      <i className="fa fa-arrow-left" />
    </button>
  )}
  renderCenterRightControls={({ nextSlide }) => (
    <button onClick={nextSlide}>
      <i className="fa fa-arrow-right"/>
    </button>
  )}
>
  {cards}
</Carousel>

UPD:文档链接已更新