关于视频中的React.FC

来源：3-11 【概念理解】State vs Props

Boy越越

2021-06-06

老师，视频中代码是这样的：
图中React.FC要这么写，参数才不会报红。
图片描述
然后我自己的代码，没有写这块，但是也可以正常运行，编辑器也没有报红，如下图：

而且，这个RobotProps我不知道这么写对不对,我直接在props后边加了:RobotProps。

我也试过不写这个RobotProps的声明，貌似也没有报红，代码还是可以运行，如下图：
图片描述

老师，我这有点疑惑就是：
1、这个RobotProps的接口，我在参数props后声明的写法是对的吗？来规范这个props的参数类型。
2、为什么我没有写React.FC也没有报错呀？
3、为什么我注释掉了RobotProps这个接口，删除了对props的声明，也没有报错？

写回答

1回答

阿莱克斯刘

2021-06-08

已采纳

我们来看看正常情况下FC的类型。

//img.mukewang.com/szimg/60be57e8096bc0db17600614.jpg

把鼠标放在参数props上，可以看到他的类型是：“react.PropsWithChildren”。什么意思呢？

很简单，就是说props变量中除了存在RobotProps的接口定义的id、name、和email以外，他还就有一个child子属性。

//img.mukewang.com/szimg/60be58ef09a01f3013600432.jpg

现在回答你的问题，

RobotProps 接口放在参数props后面声明的写法正确，但并不规范，因为这种写法少了child子属性的定义。
不报错很正常，因为React.FC本身就是一个返回jsx的函数，只不过在jsx函数的基础上增加了对child等属性的额外的定义。所以，只要你定义的函数返回jsx，不管写不写React.FC都是正确的。
注释掉RobotProps，那你的props参数的类型就变为了any，any类型可以匹配所有的任意类型，所以自然不会报错。但是，不报错不代表他就是正确的，使用any来定义props，我们在写代码会丢失对props的智能联想，那么使用typescript也就没有意义了，还不如使用原始JavaScript呢。