计算元素的响应宽度以定义尺寸

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。