React-slick 在第一次渲染时不起作用答案

【问题标题】：React-slick not working on first renderReact-slick 在第一次渲染时不起作用
【发布时间】：2017-04-02 01:42:56
【问题描述】：

我尝试使用动态子级进行 react-slick，但它不能正常工作，第一次渲染时的高度大约为 176 像素，但如果我尝试调整浏览器的大小，那么它可以工作并且高度变为 514 像素。我想可能是我强迫我的组件再渲染一次，但它没有用。我试图复制这个问题，但在那里遇到了一些其他问题。

看看fiddle

 var Item = React.createClass({
 render: function() {
 return ( < div > < p > kitten pic < /p><br/ > < img src ='http://placekitten.com/g/400/200' / > < /div>)
 }
 });

var ReactSlickDemo = React.createClass({
render: function() {
var settings = {
  dots: false,
  vertical: true,
  autoplay: true,
  autoplaySpeed: 6000,
  arrows: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  touchMove: false,
  swipeToSlide: false,
  swipe: false
}
return ( < div className = 'container' >
  < Slider {...settings
  } >
  < Item / >
  < Item / >
  < Item / >
  < /Slider> < /div>
 );
 }
});

 ReactDOM.render( < ReactSlickDemo / > ,
 document.getElementById('container')
  );

【问题讨论】：

您必须在调整大小时强制重新渲染，然后在该函数中更新状态。
@Pavan 你不觉得我的页面会闪烁吗？有没有其他方法可以实现第一次渲染本身的一些工作。 :(
我无法演奏你的小提琴。
jsfiddle.net/sourabhgarg/sbdm4b4o试试

标签： reactjs react-slick

【解决方案1】：

您在<Slider> 组件中添加了反应组件<Item>。因此，您需要将 <Item> 包裹在 <div> 中，这样应该可以。

 <div>
      < Item / >
      < Item / >
      < Item / >
 </div>

请在以下链接中找到详细信息：

https://github.com/akiran/react-slick/issues/328

【讨论】：