[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”

场景, 封装组件的时候, 想通过外部传进去一个路由地址, 再用<Link to={}>跳转, 显示这个,

有四种方法解决

第一种 合并运算符 ??

??空值合并运算符 (Nullish Coalescing Operator),它是 JavaScript 和 TypeScript 中的一种逻辑运算符,通常用于处理 nullundefined 的情况。

javascript 复制代码
a ?? b

解释:

  • 如果 a 不是 nullundefined ,那么 a ?? b 会返回 a 的值。
  • 如果 anullundefined,那么 a ?? b 会返回 b 的值。
javascript 复制代码
             <div className="right">
                {/* 第一种 */}
                <Link to={props.moreTextHref ?? ''}>{props.moreText}</Link>           
            </div>

第二种

使用条件渲染

javascript 复制代码
  {
        props.moreTextHref && (
              <Link to={props.moreTextHref}>{props.moreText}</Link>
       )}

第三种

类型断言来明确告诉 TypeScript props.moreTextHref 不会是 undefined

javascript 复制代码
  <Link to={props.moreTextHref as string}>{props.moreText}</Link>

第四种

强制传递的就是字符串

javascript 复制代码
interface IProps {
    children?: ReactNode;
    title?: string;
    keywords?: string[];
    moreText?: string;
    // 把问号去掉
    moreTextHref: string;
}
相关推荐
呦呦鹿鸣Rzh29 分钟前
Web前端开发
前端
惊鸿一博31 分钟前
正则表示式_匹配一个含有范围类型的数值字符串
javascript
jcsx34 分钟前
证券量化交易选择合适的编程语言
javascript·servlet·numpy·pandas·pyqt
会说法语的猪2 小时前
uniapp使用uni.navigateBack返回页面时携带参数到上个页面
前端·uni-app
古蓬莱掌管玉米的神10 小时前
vue3语法watch与watchEffect
前端·javascript
林涧泣10 小时前
【Uniapp-Vue3】uni-icons的安装和使用
前端·vue.js·uni-app
雾恋10 小时前
AI导航工具我开源了利用node爬取了几百条数据
前端·开源·github
拉一次撑死狗11 小时前
Vue基础(2)
前端·javascript·vue.js
祯民11 小时前
两年工作之余,我在清华大学出版社出版了一本 AI 应用书籍
前端·aigc
热情仔11 小时前
mock可视化&生成前端代码
前端