React-slick이 처음에는 작동하지 않습니다.

Question

동적 인 아이와 반응이 좋았지 만 작동하지 않습니다. 첫 번째 렌더링의 높이는 176px로오고있었습니다. 그러나 브라우저의 크기를 조정하려고하면 높이가 514px로 변경됩니다. 한 번 더 렌더링하라고 구성 요소를 강제 할 수 있다고 생각했지만 작동하지 않았습니다. 문제를 재현하려고했지만 다른 문제가 발생했습니다.

는 <Slider> 구성 요소의 구성 요소 <Item> 반응 추가 한 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') 
); 

Answer 1

를 살펴 보자. 따라서, <Item>을 <div> 안에 감쌀 필요가 있습니다. 아래의 링크를

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

찾아주세요 세부 정보 :

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