打字稿React.FC< Props>困惑 [英] Typescript React.FC<Props> confusion

问题描述

我正在学习打字稿，有些地方让我感到困惑.以下是一位:

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

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

For both functional components above, I see TypeScript generates same JS code. The PrintName2 component seems more streamline to me as far as readability. I wonder whats the difference between the two definitions and is anyone is using second type of react components.

推荐答案

非常感谢.他们是正确的，但我正在寻找更详细的版本.我做了一些进一步的研究，并在github上的react-typescipt速查表上找到了它: https ://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets

Thanks all for answers. They are correct but I was looking for a more detailed version. I did some more research and found this on react-typescipt cheatsheet on github: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#reacttypescript-cheatsheets

功能组件
这些可以编写为带有props参数并返回JSX元素的普通函数.

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>;

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

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:

它为displayName，propTypes和defaultProps之类的静态属性提供类型检查和自动完成功能-但是，当前存在将defaultProps与React.FunctionComponent一起使用的已知问题.有关详细信息，请参见此问题-向下滚动到我们的defaultProps部分以在其中键入建议.

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.

它提供了子代的隐式定义(请参阅下文)-但是隐式子代类型存在一些问题(例如DefinitelyTyped#33006)，无论如何，它可能被认为是更好的样式，可以明确地使用消耗子代的组件. /p>

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 considered better style to be explicit about components that consume children, anyway.

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

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

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对于返回类型是显式的，而常规函数版本是隐式的(否则需要附加注释).

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

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

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.

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