react 如何在滚动的div中设置锚点

在React中设置锚点与普通的HTML页面类似，但需要注意一些细节。下面是在滚动的div中设置锚点的步骤：

1. 给需要设置锚点的元素添加一个唯一的ref属性，例如：

   <div ref={el => this.section1 = el}>这是第一部分的内容</div>
   <div ref={el => this.section2 = el}>这是第二部分的内容</div>
   <div ref={el => this.section3 = el}>这是第三部分的内容</div>

2. 在页面中创建一个指向该元素的锚点链接，例如：

   <a href="#" onClick={() => this.scrollTo(this.section1)}>跳转到第一部分</a>
   <a href="#" onClick={() => this.scrollTo(this.section2)}>跳转到第二部分</a>
   <a href="#" onClick={() => this.scrollTo(this.section3)}>跳转到第三部分</a>

注意，在React中，我们需要使用onClick事件来监听锚点链接的点击事件，而不是使用普通的<a>标签。

3. 在滚动的div组件中，使用ref属性引用该元素，并且监听scroll事件。然后，实现一个scrollTo方法，该方法可以将页面滚动到指定元素的位置。

   class ScrollableDiv extends React.Component {
     scrollTo = (ref) => {
       if (ref) {
         ref.scrollIntoView({ behavior: "smooth" });
       }
     }
     
     render() {
       return (
         <div className="scrollable" onScroll={this.handleScroll}>
           <div ref={el => this.section1 = el}>这是第一部分的内容</div>
           <div ref={el => this.section2 = el}>这是第二部分的内容</div>
           <div ref={el => this.section3 = el}>这是第三部分的内容</div>
         </div>
       );
     }
   }

在该例子中，我们使用scrollIntoView方法将页面滚动到指定元素的位置，并且将滚动的过程设置为平滑的。

这样，我们就可以在React中实现在滚动的div中设置锚点的功能。