[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;
}
相关推荐
乔峰不是张无忌33019 分钟前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
码农老起26 分钟前
掌握 React:组件化开发与性能优化的实战指南
react.js·前端框架
鸿蒙自习室26 分钟前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_7482507434 分钟前
高性能Web网关:OpenResty 基础讲解
前端·openresty
前端没钱1 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
汪洪墩1 小时前
【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换
开发语言·javascript·python·ecmascript·webgl·cesium
NoneCoder1 小时前
CSS系列(29)-- Scroll Snap详解
前端·css
无言非影1 小时前
vtie项目中使用到了TailwindCSS,如何打包成一个单独的CSS文件(优化、压缩)
前端·css
我曾经是个程序员2 小时前
鸿蒙学习记录
开发语言·前端·javascript
羊小猪~~2 小时前
前端入门之VUE--ajax、vuex、router,最后的前端总结
前端·javascript·css·vue.js·vscode·ajax·html5