TypeScript React.FC<Props> confusion

javascript typescript reactjs react-functional-component

2022-08-30 04:37:55

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

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代码。就可读性而言，该组件对我来说似乎更加简化。我想知道这两个定义之间有什么区别，是否有人使用第二种类型的React组件？PrintName2

答案 1

谢谢大家的答案。他们是正确的，但我正在寻找一个更详细的版本。我做了更多的研究，并在GitHub上的React + TypeScript Cheatsheets上发现了这一点。

函数组件
这些可以编写为普通函数，这些函数采用 props 参数并返回 JSX 元素。

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

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

那么 /呢？您还可以使用（或速记）编写组件：React.FCReact.FunctionComponentReact.FunctionComponentReact.FC

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

与“正常功能”版本的一些区别：

它为静态属性（如、和 - 但是，使用提供时当前存在已知问题）提供类型检查和自动完成功能。有关详细信息，请参阅此问题 - 向下滚动到我们的部分，以在此处键入建议。displayNamepropTypesdefaultPropsdefaultPropsReact.FunctionComponentdefaultProps

它提供了子级的隐式定义（见下文） - 但是隐式子级类型存在一些问题（例如，DefinitelyTyped#33006），无论如何，对使用子级的组件进行显式处理可能被认为是一种更好的样式。

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

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

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

在大多数情况下，使用哪种语法几乎没有区别，但语法稍微冗长而没有提供明显的优势，因此“正常函数”语法具有优先权。React.FC

答案 2

React.FC不是键入 React 组件的可取方法，这里有一个链接。

我个人使用这种类型：

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

缺点的简短列表：React.FC

提供子项的隐式定义，即使你的组件不需要具有子项。这可能会导致错误。
不支持泛型。
无法与一起使用。defaultProps