时间戳

首页 > 解决方案 > React 和 TypeScript：不是箭头函数的功能组件

javascript - React 和 TypeScript：不是箭头函数的功能组件

问题描述

我正在尝试学习如何将 Typescript 与 react 一起使用，并且我知道我可以使用 typescript 创建以下内容：

import { FC } from 'react'

interface ChildProps {
  color: string
}

const Child: FC<ChildProps> = ({color}) => {
  return <div>{color}</div>
}

我想知道的是如何使用“传统”功能来做到这一点。即，像这样：

function Child: FC<ChildProps>({color}) {
  return <div>{color}</div>
}

现在，这不起作用。我得到错误。例如，这是我得到的一个错误：

在此处输入图像描述

我想知道的是如何使用传统的 js 函数来重现这个？如果是这样，怎么做？

有任何想法吗？

谢谢。

标签： javascriptreactjstypescript

解决方案

React.FC键入一个函数。这就是它的名字，function component. 函数类型很难应用于常规命名的函数。

如果我们不键入函数，而是键入它的属性，我们可以使用任何形式的函数来实现我们的目标。

interface ChildProps {
  color: string;
}

function Child({ color }: ChildProps) {
  return <div>{color}</div>;
}

否则一起去

import { FC } from 'react'

interface ChildProps {
  color: string
}

const Child: FC<ChildProps> = ({color}) => {
  return <div>{color}</div>
}

在此处阅读有关此主题的更多信息。

推荐阅读