反应滑块高度问题 [英] React Slick Slide Height Issue

问题描述

我很难让这些Reaction-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定义为SO

class SliderComponent extends React.Component{
  render() {
    return (
      <div className='slick-slider-component'>
            <h3>{this.props.header}</h3>
            <p>{this.props.text}</p>
      </div>
    );
  }
}

有人能帮我这个忙吗？感觉这应该是可能的，而且不是非常困难，但我想不出来。

SliderComponent

如果您知道自己的最大高度，则可以使用一些最小高度(或推荐答案中的最小高度)设置您的SliderComponent的样式。 您可以找到一些input here.

如果您不知道： 挂接您的组件Willmount：

componentDidMount() {
    const height = document.getElementById('slidercomponent-id').clientHeight;
    this.setState({ height });
  },

并将此高度设置为您在div中的高度。

这篇关于反应滑块高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！