Javascript Typescript React.FC<；道具>；混乱

我正在学习打字，有些地方让我感到困惑。下面是一位：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}


const PrintName2 = (props:Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>{props.name}</p>
    </div>
  )
}

界面道具{
名称：字符串；
}
常量PrintName:React.FC=（道具）=>{
返回(
{props.name}
)
}
常量PrintName2=（道具：道具）=>{
返回(
{props.name}
)
}

---

对于上面的两个功能组件，我看到TypeScript生成相同的JS代码。就可读性而言，

PrintName2

组件在我看来更加精简。我想知道这两个定义之间有什么区别，是否有人在使用第二种类型的react组件？

第一个版本将为您添加一些类型-它们来自react.FC

接口函数组件{
（props:PropsWithChildren
，context？：any）：ReactElement | null；
propTypes？：WeakValidationMap
；
contextTypes？：ValidationMap；
defaultProps？：部分
；
displayName？：字符串；
}

---

这很有用，有几个原因，但一个明显的原因是如果您的组件有子组件。然后您不需要手动添加子道具

因为您使用的是React和TypeScript，所以您应该始终使用第一种模式，因为它将确保您的组件的类型更加严格，因为它意味着

PrintName

将属于React功能组件类型，并且它接受

道具

类型的道具

const PrintName: React.FC<Props>

类似于

const PrintName2: JSX.Element = (props:Props) 

---

因为TypeScript肯定无法自动推断它是一个功能组件。

谢谢大家的回答。他们是正确的，但我正在寻找一个更详细的版本。我做了更多的研究，在github上的react typescipt备忘单上发现了以下内容：

功能组件
可以将这些函数编写为普通函数，这些函数接受props参数并返回JSX元素

type AppProps = { message: string }; /* could also use interface */
const App = ({ message }: AppProps) => <div>{message}</div>;

与“正常功能”版本的一些差异：

它为静态属性（如displayName、propTypes和defaultProps）提供类型检查和自动完成功能-但是，使用带有React.FunctionComponent的defaultProps目前存在一些已知问题。有关详细信息，请参阅本期-向下滚动到我们的defaultProps部分，在那里键入建议

它提供了子项的隐式定义（见下文）——但是隐式子项类型存在一些问题（例如DefinitelyTyped#33006），无论如何，对于使用子项的组件，显式定义可能被认为是更好的风格

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

const Title:React.FunctionComponent=({
儿童
标题
})=>{children}；

将来，它可能会自动将道具标记为只读，但如果道具对象在参数列表中被分解，这是一个没有意义的点

React.FunctionComponent对于返回类型是显式的，而普通函数版本是隐式的（或者需要额外的注释）

在大多数情况下，使用哪种语法差别很小， 但是React.FC语法在没有提供 明显的优势，因此优先考虑“正常函数” 语法

---

React.FC

不是键入React组件的首选方法，下面是一个示例

我个人使用这种类型：

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }

React.FC

cons短列表：

提供子级的隐式定义，即使组件不需要子级。这可能会导致错误

不支持泛型

无法正确使用

defaultProps

---

回答这里，更多关于属性的信息可以在React.FC.OK中找到。但应该推断第二种情况下的返回类型。将鼠标悬停在它上面，会显示以下内容：const PrintName2:（props:props）=>JSX.element虽然会进行推断，但有时推断并不完全正确，但如果在添加返回值之前先添加类型信息，则在满足返回类型规范之前会出现错误。它可能会将其推断为JSX元素，但它不会自动推断出它是一个功能组件最好的答案，直截了当地说，嘿，库尔德普，首先感谢你提供了详细的答案。也许它缺少了一个“详细信息请参阅本期”的链接。如果我错了，请忽略：）嘿，详细解释的链接是我在第一段中提到的github链接。：）Thank show to you type check prop1，prop2等？@ArafatZahan您可以编写

{prop1，prop2}:{prop1:string，prop2:number}

。请参阅或

{prop1，prop2}:Props

const Title: React.FunctionComponent<{ title: string }> = ({
  children,
  title
}) => <div title={title}>{children}</div>;

const Component1 = ({ prop1, prop2 }): JSX.Element => { /*...*/ }