我无法让这些 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>
);
}
}
谁能帮我这个?感觉这应该是可能的,而且不是非常困难,但我无法弄清楚。
如果您知道最大高度,则可以使用一些 minHeight (或 css 中的 min-height )来设置 SliderComponent 的样式。
你可以找到一些在此输入。 https://stackoverflow.com/questions/41324813/react-set-an-element-with-one-classnames-min-height-equal-to-the-element-with-a
如果你不知道:
挂钩在你的 componentWillMount 中:
componentDidMount() {
const height = document.getElementById('slidercomponent-id').clientHeight;
this.setState({ height });
},
并将这个高度设置为您在 div 中的高度。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)