React.FC 的衍生问题

来源：3-3 第一个组件 - ts为组件助力

ywang04

2021-01-28

老师在实际项目中使用React.FC 遇到了如下问题

interface SubHeadingProps {
 title: string;
 ...... //其他props
}

const SubHeading: FC<SubHeadingProps> = ({ title }) => {
 return <div>SubHeading</div>
}

SubHeading.legacyName = 'ux-sub-heading';
export default  SubHeading;

我们需要指明SubHeading对应的之前legacy component名字是什么这里是ux-sub-heading
其实多一个legacyName这个prop对代码没有什么实质影响只是对开发人员的一个提示
但是导致的问题是 vscode会报 Property ‘legacyName’ does not exist on type ‘FC’. ts(2339).

请问如果不想将legacyName添加到interface里去并且还想保留 SubHeading.legacyName = ‘ux-sub-heading’; 并且依旧使用FC的前提下还有什么办法可以解决 Property ‘legacyName’ does not exist on type ‘FC’. ts(2339). 这个错误呢？

https://stackoverflow.com/questions/58867121/ts2339-property-whydidyourender-does-not-exist-on-type-fcbuttonprops 这个里面的解决方案我觉得并不完美不知道老师有没有更好的解决方案。谢谢

写回答

1回答

张轩

2021-01-29

已采纳

同学你好这个只能用一个别名来覆盖或者修改原始的 FC 类型了。比如

  import { FC } from 'react';  
  export type FCWithLegacy<P = {}> = FC<P> & {
    legacyName?: string
  };

ywang04

谢谢老师请问 P 是指代props吗？

2021-01-30

共2条回复

React18+TS高仿AntD从零到一打造组件库

设计，开发，测试，发布再到 CI/CD，从0到1造轮子

2124 学习 · 959 问题

查看课程

相似问题

老师想问一下，为什么props不用写成props：IHelloProps

回答 1

使用React.FC的意义

回答 1

泛型传入的东西不理解 3-10 第六分钟的部分

回答 1

老师好关于React.FC<BaseButtonProps>

回答 1

https://coding.imooc.com/learn/questiondetail/Dg8m5YZqGDzPWa4B.html 问题的衍生

回答 1

打开慕课网App查看更多内容