一、问题
博主在写代码的时候，遇到一个需求，要求实现一个点击事件，达到类似于html锚点效果的定位功能，将页面定位到对应的选择的地方，但reacr不能使用a链接去进行锚点的点击，因为a链接会触发路由跳转，因此博主搜罗八方，找到一个方法。
二、解决方法
DOM对象.scrollIntoView（{block：“”，behavior："",inline:""}）
-
block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
-
behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
-
inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
三、代码
class Maodian extends Component {
state = {
applist: ["app1", "app2", "app3"]
}
hander = (value)=>{
if(value){
// 获取dom节点
let anchorElement = document.getElementById(value)
// 通过scrollIntoView方法
// block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
// inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
}
}
render() {
return (
<>
<div className="nav">
{
this.state.applist.map((item, index) => {
return <div
key={index}
className="box"
// 创建点击事件 传入对应的iterm
onClick= {() => this.hander(item)}
>
{item}
</div>
}
)
}
{
this.state.applist.map((item, index) =>{
return <div
className='box2'
key={index}
// 循环生成三个大盒子生成对应item的 ID
id={item}
>
<h1>{item}</h1>
</div>
})
}
</div>
</>
);
}
}
关键函数：
hander = (value)=>{
if(value){
// 获取dom节点
let anchorElement = document.getElementById(value)
// 通过scrollIntoView方法
// block设定垂直方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "start"。
// behavior设定动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
// inline设定水平方向对齐"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
if(anchorElement) {anchorElement.scrollIntoView({block:"start",behavior:"smooth"})}
}
}
需要注意的是，定位盒子的id要与你传入的值相对应，并能够通过document.getElementById(传入的值)拿到相对应的DOM节点，才能实现类似锚点的定位移动功能。
2022年7月25日补 ————————————————————————————————
博主是甜蜜的烧饼，andt官网就有这个插件
