响应属性不适用于 react-slick答案

【问题标题】：Responsive property does not work on react-slick响应属性不适用于 react-slick
【发布时间】：2019-02-04 12:03:38
【问题描述】：

我想在小型设备上更改sliderToShow 属性，但responsive 属性不起作用。

let settings_3 = {
  dots: false,
  autoplay: false,
  autoplaySpeed: 3000,
  slidesToShow: 3,

  responsive: [{
    breakpoint: 600,
    settings_3: {
      slidesToShow: 2,
      slidesToScroll: 2,
      initialSlide: 2
    }
  }]
};

【问题讨论】：

对不起，我不能添加完整的代码这么长，但我的问题就在这里。我没有任何错误
@John 好吧，这显然不足以进行调试。

标签： javascript css reactjs slider

【解决方案1】：

在responsive[] 中将settings_3 更改为settings。 slick 中没有 settings_3 属性：

class SimpleSlider extends React.Component {
  render() {
    let settings_3 = {
      dots: false,
      autoplay: false,
      autoplaySpeed: 3000,
      slidesToShow: 3,

      responsive: [{
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2
        }
      }]
    };
    return (
      <Slider {...settings_3}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    );
  }
}

ReactDOM.render( <SimpleSlider/> ,
  document.getElementById('root')
);

#root{
text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.13.1/react-slick.js"></script>

<div id='root'></div>

【讨论】：

名字无所谓，我写的是react不是jQuery 抱歉
@John，你在用react-slick吗？
反应光滑的是
github.com/akiran/react-slick/issues/656 在这里我发现不仅我有这个问题，而且无法解决。
@John，我已经用 React.js 版本更新了我的答案。将settings_3 更改为settings 后似乎可以正常工作。调整窗口大小并检查。此外，react-slick 版本可能存在问题。只是猜测。

【解决方案2】：

以防万一有人遇到与我相同的问题：如果您有基于函数的组件，请尝试将其更改为基于类的组件。在尝试了这个之后，响应式属性对我来说非常有用?

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。