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

Question

我有一个使用 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: `${width}px`,
              }
            },
            }
          ]
        };

最后在我的回归

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

          <img alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />
          <img alt="" src={destination.photo.url}
            onLoad={this.handleImageLoaded} />
        </Slider>
    </Row>

但是我遇到了这个错误：

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

Answer 1

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

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