如何解决ReactJS中react-scroll Link组件的重载匹配错误

报错原因 #

react-scroll的Link组件有必填属性to，用于指定点击后滚动到的目标DOM元素的id值，你当前代码中所有Link组件都没有传入该必填属性，因此触发类型校验报错。

解决方法 #

给每个Link组件补充to属性，属性值对应你要滚动到的目标元素id即可，你可以根据实际业务需求调整to的取值，需要保证页面中存在对应id的DOM元素，滚动功能才能正常生效。示例修改后的代码如下：

import React from 'react'
import { Link } from 'react-scroll'
import "./Protocol.css"
import { ANALYTICS, TRADE, USERS, TRADERS, VOTES, ZEROES } from "../../Constants"
const Protocol = () => {
    return (
        <div className="Protocol_container">
            <div className="Protocol_heading">
                {ANALYTICS}
            </div>
            <div className="Protocol_content">
                {/* to属性值对应你页面中要滚动到的元素id，以下值仅为示例，可自行调整为实际id */}
                <Link to="trade" smooth={true} duration={500}>
                    <p>{ZEROES}</p>{TRADE}
                </Link>
                <Link to="users" smooth={true} duration={500}>
                    <p>{ZEROES}</p>{USERS}
                </Link>
                <Link to="traders" smooth={true} duration={500}>
                    <p>{ZEROES}</p>{TRADERS}
                </Link>
                <Link to="votes" smooth={true} duration={500}>
                    <p>{ZEROES}</p>{VOTES}
                </Link>
            </div>

        </div>
    )
}
export default Protocol

常用可选属性说明 #

如果需要调整滚动效果，可以给Link添加以下常用属性：

• smooth：布尔值，开启平滑滚动效果
• duration：滚动动画的时长，单位为毫秒
• offset：滚动结束后相对于目标元素的偏移量，单位为像素，适合需要避开顶部导航栏遮挡的场景使用
• spy：布尔值，滚动到对应区域时自动给当前Link添加激活类名

内容的提问来源于stack exchange，提问作者mohan A