reactjs react组件typescript的返回类型[重复]

xdyibdwo 于 2023-03-29 发布在 React

关注(0)|答案(2)|浏览(134)

此问题在此处已有答案：

When to use JSX.Element vs ReactNode vs ReactElement?（4个答案）
昨天关门了。
我有以下组件：

const MyComponent: React.FC = function(){
  return "hello world"
}

它是正确的，而且不是假的，但是，typescript抱怨这是不正确的，因为返回类型是字符串，它认为它应该是一个JSX元素。
那么这里使用的正确类型是什么呢？
我想简单地定义一个组件，所以它仍然会理解参数的类型，所以 props 和 ref，
所以它仍然是一个组件
我不想写
: string作为返回类型，因为它不完全正确，它不是一个普通的函数，它是一个组件。
但是我认为FC类型的实现是错误的，或者我应该使用另一种类型。
哪种类型定义组件？

reactjs

来源：https://stackoverflow.com/questions/75861152/return-type-of-a-react-component-typescript

2条答案

按热度按时间

zujrkrfu1#

使用React.ReactNode：

type Props = {
    // ...
}

function MyComponent(props: Props): React.ReactNode {
    return 'Hello world!'
}

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wFgAoCmATzCTgAUcwBnOAXjgG8K4+4A9ALgA6MRQC+FCkgAekWHEwBXAHYZgEVXACy1AMK5IqpKpgAKMMxYAuRtYCUd5OhgiXGAHIQAJvR7k-HBEMMpQ2vgAEkgANjEQcADu0DE+AIRk5BJAA

赞(0）回复(0）举报 2023-03-29

n8ghc7c12#

一般来说，不鼓励使用React.FunctionComponent或它的简写React.FC。我发现它最终会导致摩擦和流失，而收益很少。你可以阅读更多关于它的here，但这里是内幕：
使用React.FC的优点：

更明确
它为静态属性（如displayName、propTypes和defaultProps）提供了类型检查和自动完成功能。
（v18之前版本）自动在 prop 中包含children ...这并不总是理想的

使用React.FC的缺点：

当你只想制作一个组件时，它会非常冗长，难以阅读，“妨碍你的工作
（v18之前的版本）自动在props中包含children，这并不总是可取的。

几年前，当他们最初不鼓励使用它时，我停止使用它，我不能更高兴了。你只需像往常一样编写函数，TS将推断返回类型。我通常像这样单独定义我的props：

type MyComponentProps =  {...};

const MyComponent = ({ ... }: MyComponentProps) => {
   ...
}

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs react组件typescript的返回类型[重复]

2条答案

相关问题

热门标签

最新问答