typescript “slider”可能为“null”

yk9xbfzb 于 2022-12-27 发布在 TypeScript

关注(0)|答案(2)|浏览(169)

我不知道怎么修，我很肯定这是件容易的事，但我就是想不出来。
下面是从TS生成错误的代码行：

const slideLeft = () => {
      const slider = document.getElementById("slider");
      slider.scrollLeft = slider.scrollLeft - 1000;
  };

  const slideRight = () => {
    const slider = document.getElementById("slider");
    slider.scrollLeft = slider.scrollLeft + 1000;
  };

ID滑块导致错误（“slider”可能为“null”）

<div
        id="slider"
        className="flex items-center w-full h-full overflow-x-scroll scroll whitespace-nowrap scroll-smooth scrollbar-hide"
      >

任何指点或提示都很感激！谢谢！

typescript

来源：https://stackoverflow.com/questions/74923533/slider-is-possibly-null

2条答案

按热度按时间

vxqlmq5t1#

这是因为如果没有找到与指定ID匹配的元素，则从getElementById返回的值将是Element或null。
您可以使用几个optoin来降低null值。
执行显式null检查。

const slideLeft = () => {
    const slider = document.getElementById("slider");
    if (slider == null) return;
    slider.scrollLeft = slider.scrollLeft - 1000;
};

使用non-null and non-undefinedAssert运算符。

const slideRight = () => {
    const slider = document.getElementById("slider");
    slider!.scrollLeft = slider!.scrollLeft + 1000;
};

赞(0）回复(0）举报 2022-12-27

2uluyalo2#

document.getElementById方法的返回类型为HTMLElement | null。如果DOM中不存在具有所提供的id的元素，则该方法返回null值。
要解决您的问题，只需检查slider是否包含值：

const slideLeft = () => {
  const slider = document.getElementById("slider");

  if(slider) {
    slider!.scrollLeft = slider!.scrollLeft - 1000;
  }
};

赞(0）回复(0）举报 2022-12-27

我来回答

typescript “slider”可能为“null”

2条答案

相关问题

热门标签

最新问答