我无法让这些 React-Slick 滑块组件具有相同的高度。它们都是响应式 div 并随着页面大小的变化相应地调整大小,但我理想情况下希望左侧的 div 与右侧的 div 高度相同。
我用下面的代码片段定义了我的 SimpleSlider。
class SimpleSlider extends React.Component {
constructor(props) {
super(props);
...
}
render() {
let settings = {
dots: true,
infinite: true,
arrows: true,
speed: 500,
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 0,
responsive: [...]
};
let Components = this.sliderObjects.components;
return (
<div>
<h2> {this.sliderObjects.title} </h2>
<Slider {...settings} >
{
Components.map((component,index)=>
<div key={index} >
<SliderComponent key={index} {...component} />
</div>
)
}
</Slider>
</div>
);
}
}
然后我的 SliderComponent 定义为这样
class SliderComponent extends React.Component{
render() {
return (
<div className='slick-slider-component'>
<h3>{this.props.header}</h3>
<p>{this.props.text}</p>
</div>
);
}
}
有人可以帮我吗?感觉应该是可以的,不是特别难,就是想不通
如果你知道你的最大高度,你可以为你的 SliderComponent 设置一些 minHeight(或 min-height in css)。 你可以在这里找到一些输入。
如果你不知道: 挂钩你的 componentWillMount:
componentDidMount() {
const height = document.getElementById('slidercomponent-id').clientHeight;
this.setState({ height });
},
并将此高度设置为您的 div 中的高度。
我添加了 centerPadding: '0px',设置它对我有用