TypeScript React.FC<Props>困惑

问题描述

我正在学习 TypeScript，有些地方让我感到困惑.下面是一点:

interface Props {名称:字符串；}const PrintName: React.FC<Props>=(道具)=>{返回 (
<p style={{ fontWeight: props.priority ?大胆":正常"}}>{props.name}</p></div>)}const PrintName2 = (props: Props) =>{返回 (
<p style={{ fontWeight: props.priority ?大胆":正常"}}>{props.name}</p></div>)}

对于上面的两个功能组件，我看到 TypeScript 生成了相同的 JS 代码.就可读性而言，PrintName2 组件对我来说似乎更加精简.我想知道这两种定义有什么区别，是否有人使用第二种类型的 React 组件?

感谢大家的回答.他们是正确的，但我正在寻找更详细的版本.我做了更多的研究，并在 React+TypeScript Cheatsheets 上找到了这个在 GitHub 上.

功能组件
这些可以写成普通函数，接受一个 props 参数并返回一个 JSX 元素.

type AppProps = { message: string };/* 也可以使用接口 */const App = ({ message }: AppProps) =><div>{消息}</div>;

React.FC/React.FunctionComponent 呢?您还可以使用 React.FunctionComponent(或简写 React.FC)编写组件:

const App: React.FC<{ message: string }>= ({ 消息 }) =>(<div>{消息}</div>);

与正常功能"的一些区别；版本:

它为 displayName、propTypes 和 defaultProps 等静态属性提供类型检查和自动完成功能 - 但是，目前存在使用 的已知问题>defaultProps 与 React.FunctionComponent.有关详细信息，请参阅此 问题 - 向下滚动到我们的 defaultProps 部分，用于在此处输入建议.

它提供了子项的隐式定义(见下文) - 但是隐式子项类型存在一些问题(例如，DefinitelyTyped#33006)，无论如何，明确使用子项的组件可能被认为是一种更好的样式.

const Title: React.FunctionComponent<{ title: string }>= ({孩子们，标题}) =><div title={title}>{children}</div>;

将来，它可能会自动将 props 标记为只读，但如果 props 对象在参数列表中被解构，那将是一个有争议的问题.

React.FunctionComponent 是明确的返回类型，而普通函数版本是隐式的(或者需要额外的注释).

在大多数情况下，使用哪种语法几乎没有区别，但是 React.FC 语法稍微有点冗长，没有提供明显的优势，因此优先考虑正常功能"；语法.

I am learning TypeScript and some bits are confusing to me. One bit is below:

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>
  )
}

For both functional components above, I see TypeScript generates the same JS code. The PrintName2 component seems more streamlined to me as far as readability. I wonder what's the difference between the two definitions and if anyone is using second type of React component?

Thanks all for the answers. They are correct but I was looking for a more detailed version. I did some more research and found this on React+TypeScript Cheatsheets on GitHub.

Function Components
These can be written as normal functions that take a props argument and return a JSX element.

type AppProps = { message: string }; /* could also use interface */

const App = ({ message }: AppProps) => <div>{message}</div>;

What about React.FC/React.FunctionComponent? You can also write components with React.FunctionComponent (or the shorthand React.FC):

const App: React.FC<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

Some differences from the "normal function" version:

It provides typechecking and autocomplete for static properties like displayName, propTypes, and defaultProps - However, there are currently known issues using defaultProps with React.FunctionComponent. See this issue for details - scroll down to our defaultProps section for typing recommendations there.

It provides an implicit definition of children (see below) - however there are some issues with the implicit children type (e.g. DefinitelyTyped#33006), and it might be considered a better style to be explicit about components that consume children, anyway.

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

In the future, it may automatically mark props as readonly, though that's a moot point if the props object is destructured in the parameter list.

React.FunctionComponent is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).

In most cases, it makes very little difference which syntax is used, but the React.FC syntax is slightly more verbose without providing clear advantage, so precedence was given to the "normal function" syntax.

这篇关于TypeScript React.FC<Props>困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！