0

从昨天开始，我一直在尝试解决该错误，但仍然没有运气。我将简要解释一下。

期望

我正在使用 React ScrollSpy Nav Library 根据当前滚动文章的 id 在网页上实现活动链接突出显示功能。

不要对我设置链接的方式感到困惑，我只是使用 reacti18next 来适应不同语言的链接，因此更容易动态添加它们并限制复制粘贴。

我希望突出显示活动链接，并且onClick -+- 通过其 id 滚动到所需的文章。

当调用 onScroll 事件时，当脚本尝试添加或删除 .is-active类名时，我收到错误“无法读取 null 的属性类列表” 。我一直在尝试解决它并得出一个结论，即发生的事情是（按升序，颠倒）：

3)

this.scrollTargetIds.forEach(function (r, n) {
              document.getElementById(r) ? (e = document.getElementById(r).offsetTop - (t.headerBackground ? document.querySelector("div[data-nav='list']").scrollHeight : 0), window.pageYOffset - t.offset >= e && window.pageYOffset < e + document.getElementById(r).scrollHeight ? (t.getNavLinkElement(r).classList.add(t.activeNavClass), t.clearOtherNavLinkActiveStyle(r)) : t.getNavLinkElement(r).classList.remove(t.activeNavClass), window.innerHeight + window.pageYOffset >= document.body.scrollHeight && n === t.scrollTargetIds.length - 1 && (t.getNavLinkElement(r).classList.add(t.activeNavClass), t.clearOtherNavLinkActiveStyle(r))) : console.warn("".concat("react-scrollspy-nav", ": no element with id ").concat(r, " present in the DOM"));
            });

t.getNavLinkElement(r)返回 null，因为（这是该函数的实现 - getNavLinkElement）：

2)

getNavLinkElement(sectionID) {
    return document.querySelector(`a[href='${this.hashIdentifier}${sectionID}']`);
  }

因为这里这是未定义的，正如我在 devtools 调试器范围的块中探索的那样。这是未定义的，但 r 和 n 是 =“定义”和 0（如预期的那样）

3)

这里是 this.hashIdentifier 设置的地方：

constructor(props) {
    super(props);

    this.props = props;
    this.scrollTargetIds = this.props.scrollTargetIds;
    this.activeNavClass = this.props.activeNavClass;
    this.scrollDuration = Number(this.props.scrollDuration) || 1000;
    this.headerBackground = this.props.headerBackground === "true" ? true : false;
    this.offset = this.props.offset || 0;

    this.onScroll = this.onScroll.bind(this);

    if(this.props.router && this.props.router === "HashRouter") {
      this.homeDefaultLink = "#/";
      this.hashIdentifier = "#/#";
    } else {
      this.homeDefaultLink = "/";
      this.hashIdentifier = "#";
    }
  }

Classe的构造函数

这是我的 React 代码，我在其中初始化了 React Scrollspy Nav 组件，并设置了链接，等等。它是导航组件：

export const LeftSideNavigation = () => {
    const {t} = useTranslation();
    const [isLoaded, setIsLoaded] = React.useState(false);
    React.useEffect(() => {
      if (!document) {
        return;
      }
      if (!document.querySelector) {
        return;
      }
      if (document.querySelector("#articles-wrapper")) {
         
        console.log(isLoaded)
        if (!(document.querySelector("#articles-wrapper") as Element).innerHTML) {
          
          return;
        }
        
        console.log((document.querySelector("#articles-wrapper") as Element).innerHTML)
        setIsLoaded(true);
       
      }
      else{
        console.log("cannot find ekement with id articles wrapper")
      } 
    }, []);
    React.useEffect(() =>{
      console.log("is loaded is", isLoaded);
    }, [isLoaded])
    const [Arr, setArr] = React.useState(window.location.toString().includes("termsOfService") ? SubLinks1 : SubLinks2);
    return (
        <Container>
          {isLoaded && 
            (<ScrollspyNav
                        scrollTargetIds={[...Arr.map((link : LinkItem) => {return(camelize(t(link.name)))})]}
                        offset={100}
                        activeNavClass="is-active"
                        scrollDuration="1000"
                        headerBackground="true"
                    ><ul>
                      _{
                        Arr === SubLinks1 ? (<ExpandableLink higherLevelLink="termsOfService" name="conditionsPages.termsOfServiceLinkText" subLinks={SubLinks1} />) : (<ExpandableLink higherLevelLink="privacyPolicy" name="conditionsPages.privacyPolicyLinkText" subLinks={SubLinks2} />)
                      }
                    
                    
                </ul>
            </ScrollspyNav>)
}
        </Container>
    )
}

它的文章组件：

<ArticlesContainer id="articles-wrapper">
            <Wrapper id="definitions"><Title variant="h4">{t("privacyArticles.1.title")}</Title><Content><Trans i18nKey="privacyArticles.1.content"/></Content></Wrapper>

我想了解为什么“this”未定义。

重要的提示！

我附加的代码块（除了 React 组件的代码块）来自 react-scrollspy-nav node_module 的文件夹，因此我无法编辑这些函数中的代码。我只能编辑 React 组件的代码。

PS：我通过 npm 安装了包（更准确地说是 yarn），这里是该库的 github 完整源代码：https ://github.com/StephenWeiXu/react-scrollspy-nav 。如果我没有提供足够的代码片段，请查看它。该库几天前可以工作，但我偶然删除了项目的文件，无法恢复，现在重新实现所有内容。

4

0 回答 0