当前位置: 首页 > news >正文

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

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

有四种方法解决

第一种 合并运算符 ??

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

a ?? b

解释:

  • 如果 a 不是 null 或 undefined,那么 a ?? b 会返回 a 的值。
  • 如果 a 是 null 或 undefined,那么 a ?? b 会返回 b 的值。
             <div className="right">{/* 第一种 */}<Link to={props.moreTextHref ?? ''}>{props.moreText}</Link>           </div>

第二种

使用条件渲染

  {props.moreTextHref && (<Link to={props.moreTextHref}>{props.moreText}</Link>)}

第三种

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

  <Link to={props.moreTextHref as string}>{props.moreText}</Link>

第四种

强制传递的就是字符串

interface IProps {children?: ReactNode;title?: string;keywords?: string[];moreText?: string;// 把问号去掉moreTextHref: string;
}

http://www.lryc.cn/news/507918.html

相关文章:

  • python实现基于RPC协议的接口自动化测试
  • 如何使用PSQL Tool还原pg数据库(sql格式)
  • uni-app商品搜索页面
  • 【深度学习】零基础介绍循环神经网络(RNN)
  • 青少年编程与数学 02-004 Go语言Web编程 13课题、模板引擎
  • 如何优雅的关闭GoWeb服务器
  • AI程序员,开源的Devin,OpenHands 如何使用HuggingFace Inference API
  • 【动手学运动规划】 5.2 数值优化基础:梯度下降法,牛顿法
  • 电子应用设计方案66:智能打印机系统设计
  • iClient3D for Cesium 实现限高分析
  • AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python
  • torch.unsqueeze:灵活调整张量维度的利器
  • 【WRF教程第3.1期】预处理系统 WPS 详解:以4.5版本为例
  • SD ComfyUI工作流 根据图像生成线稿草图
  • 挑战一个月基本掌握C++(第六天)了解函数,数字,数组,字符串
  • git中的多人协作
  • 解决新安装CentOS 7系统mirrorlist.centos.org can‘t resolve问题
  • RK3588 , mpp硬编码yuv, 保存MP4视频文件.
  • Elasticsearch:什么是查询语言?
  • 均值聚类算法
  • MySQL 中快速插入大量数据
  • 腾讯云智能结构化OCR:以多模态大模型技术为核心,推动跨行业高效精准的文档处理与数据提取新时代
  • 最大似然检测在通信解调中的应用
  • SKETCHPAD——允许语言模型生成中间草图,在几何、函数、图算法和游戏策略等所有数学任务中持续提高基础模型的性能
  • [JAVA备忘录] Lambda 表达式简单介绍
  • [python]使用flask-caching缓存数据
  • 裸机按键输入实验
  • GaussDB运维管理工具(二)
  • 【HarmonyOS之旅】HarmonyOS开发基础知识(一)
  • Mysql数据究竟是如何存储的