计算元素的响应宽度以定义大小

Posted 2023-02-25

【中文标题】计算元素的响应宽度以定义大小

【英文标题】：calculate responsive width of element to define size

【发布时间】：2019-02-21 15:41:02

【问题描述】：

我有一个使用 react-slick 的轮播，我希望主幻灯片与另一个组件具有相同的宽度并具有响应性。

我试着这样计算：

   const width = (window.innerWidth - document.getElementById('element').offsetWidth)/2;

在我的渲染方法中，我有：

        const settings = 
          className: "center",
          centerMode: true,
          arrows: true,
          infinite: true,
          centerPadding: "220px",
          slidesToShow: 1,
          speed: 500,
          responsive: [
            
              breakpoint: 1441,
              settings: 
                centerPadding: `$widthpx`,
              
            ,
            
          ]
        ;

最后在我的回归

<Row style= margin: '150px 0px'>
        <Slider ...settings>
          <img   src=destination.photo.url
            onLoad=this.handleImageLoaded />
          <img  src=destination.photo.url
            onLoad=this.handleImageLoaded />

          <img  src=destination.photo.url
            onLoad=this.handleImageLoaded />
          <img  src=destination.photo.url
            onLoad=this.handleImageLoaded />
        </Slider>
    </Row>

但是我遇到了这个错误：

我已经在控制台中进行了计算，一切正常，所以不确定这是从哪里来的

【参考方案1】：

错误是由于此处有一个额外的“s”：document.getElementsById。

由于ID是唯一的，正确的方法是document.getElementById。

【讨论】：

谢谢你！这是我的一个愚蠢的错误。但它仍然不起作用，因为centerPadding 似乎只接受一个字符串，它不适用于数字，所以我的组件没有显示

当我尝试这样计算时：const width = window.innerWidth - document.getElementById('element').offsetWidth;我有一个错误cannot read property 'offsetWidth' of null