如何滚动到特定部分？

Question

我在 React 中使用来自 Facebook 的 Draft JS。

我的 draft 在行以 # Section name 开头时在文本上添加修饰符。在我页面上的另一个组件中，我想创建一个 link，它会在单击时向下滚动到该部分。

|-------| ------------|
|Nav    | Draft editor|
|Title 1| # Title 1 |
|.      | Some text |

我的装饰器非常基础：

{
    strategy: (contentBlock: any, callback: any) => {
        const REGEX =/^(# .+)$/
        findWithRegex(REGEX, contentBlock, callback)
    },
    component: (props: any) => {
        
        return <h3>{props.children}</h3>
    }

}

我的导航link

<a onClick={()=>{
   window.scrollTo() // Scroll to Title 1 in DraftJS
}}>Title 1</a>

在过去的 JS 时代，我会想出一种方法来制作 ID 并获取元素，但这不是反应方式。

感谢任何帮助。谢谢。

编辑：这是一个 codesandbox to play around

Answer 1

我不喜欢它并且感觉很脏，但是为了防止有人遇到类似的问题，我基本上创建了一个将章节名称转换为 ID 的函数，如下所示：

const chapterToId = (txt: string): string => {
    return txt.trim().split("# ").join("").split(" ").join("-").toLowerCase()
}

然后我使用此函数创建一个 # 超链接，如下所示：

{chapters.map((chapter, i) => {
   const chapterId = chapterToId(chapter);
     return <a
          key={i}
          href={`#${chapterId}`}>
               {chapter}
        </a>      
})}

在草稿 JS 中，将 ID 添加到装饰器中，如下所示：

const chapters = {
  strategy: (contentBlock: any, callback: any) => {
    const REGEX = /^(# .+)$/gm;
    findWithRegex(REGEX, contentBlock, callback);
  },
  component: (props: any) => {
    const text = props.children[0].props.text;
    const id = chapterToId(text);
    return (
      <h3 id={id} className="text-2xl font-bold mt-4 mb-6">
        {props.children}
      </h3>
    );
  }
}

这里的工作示例：https://codesandbox.io/s/book-editor-vrfqy?file=/src/components/MyDraft.tsx

如何滚动到特定部分？

How can I scroll to specific section?

reactjs

draftjs