2

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

看看小提琴 

 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')
  );
4

2 回答 2

1

<Item>您已经在组件中添加了反应<Slider>组件。所以，你需要包裹<Item>在里面<div>，这应该可以。

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

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

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

于 2017-09-14T06:05:28.573 回答
0

请添加父 div css:-

.container {   display: inline-block; }
于 2022-01-05T10:30:17.723 回答