[react]不能将范例“string | undefined”分配给范例“To”。 不能将范例“ ...

场景, 封装组件的时间, 想通过外部传进去一个路由地址, 再用<Link to={}>跳转, 显示这个,
有四种方法办理
第一种 合并运算符 ??

?? 是 空值合并运算符（Nullish Coalescing Operator），它是 JavaScript 和 TypeScript 中的一种逻辑运算符，通常用于处理 null 或 undefined 的环境。

1. a ?? b

复制代码

解释：

• 假如 a 不是 null 或 undefined，那么 a ?? b
   会返回 a 的值。
  
• 假如 a 是 null 或 undefined，那么 a ?? b
   会返回 b 的值。
  

1.              <div className="right">
2.                 {/* 第一种 */}
3.                 <Link to={props.moreTextHref ?? ''}>{props.moreText}</Link>           
4.             </div>

复制代码

第二种

使用条件渲染

1.   {
2.         props.moreTextHref && (
3.               <Link to={props.moreTextHref}>{props.moreText}</Link>
4.        )}

复制代码

第三种

范例断言来明确告诉 TypeScript props.moreTextHref 不会是 undefined。

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

复制代码

第四种

强制通报的就是字符串

1. interface IProps {
2.     children?: ReactNode;
3.     title?: string;
4.     keywords?: string[];
5.     moreText?: string;
6.     // 把问号去掉
7.     moreTextHref: string;
8. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。