1

我在我的 reactjs 应用程序中使用 react-slick。我正在尝试在滑块中实现下一个和上一个箭头。但这不起作用。这是我的代码

这是我的“settingss”变量，它被应用于 

var settingss ={
    infinite: false,
    slidesToScroll: 1,
    slidesToShow: 3,
    arrows:true,
    prevArrow: document.getElementsByClassName("a-left"),
    nextArrow: document.getElementsByClassName("a-right"),
    variableWidth: false,
    responsive: [{
        breakpoint: 920,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            // arrows: true,

        }
    }]
}

这是我的滑块代码。

return  <div className={`card-item ${container_class}`}>
    <div className="bg">
        <div className="arrows">
            <div className="a-left">
                <span className="fa fa-chevron-left"></span>
            </div>
            <div className="a-right">
                <span className="fa fa-chevron-right"></span>
            </div>
        </div>
        <div className="dp-circle"></div>
        <div className="dp-name">John
            <div className="dp-location">NYC</div>
        </div>
    </div>
    <Slider {...settingss} className="fg-items">
        {item.activities.map((item1,i)=>{
            return <div className="react-inter">
                <div className="img"></div>
                <div className="info">
                    <div className="caption">
                        This is for test
                    </div>
                    <div className="tags">
                        <div className="visual">Visual</div>
                        <div className="visual">Text</div>
                        <div className="visual">Edited</div>
                    </div>
                    <div className="buttons">
                        <div className="tick">
                            <span className="fa fa-check"></span>
                        </div>
                        <div className="cross">
                            <span className="fa fa-times"></span>
                        </div>
                    </div>
                </div>
            </div>
        })}
    </Slider>
</div>

我正在按照文档使用指南。我究竟做错了什么？

4

1 回答 1

0

从这里的文档：https ://react-slick.neostack.com/docs/example/custom-arrows看起来您应该将箭头放在无状态组件中并在您的设置中引用它们。该文档没有解释它们应该是组件而不是 DOM 节点，并且不强制执行任何道具类型。

于 2018-05-22T18:49:44.623 回答