ReactNative中功能组件的首选TypeScript签名?

Question

我对在TypeScript中键入功能React Native组件的最佳实践的当前观点有困难。我发现许多帖子和线程似乎从一种观点开始，然后随着时间的推移转向另一种观点，没有明确的共识。

对此是否有当前视图?例如，你是更喜欢下面这些，还是完全不喜欢?

// Version ONE (makes most "sense" to me)
const MyComponent = (props: MyComponentProps): JSX.Element => {
return ( 
//... some JSX
)
}

// Version TWO (makes props a PropsWithChildren<MyComponentProps>?)
const MyComponent: FC<MyComponentProps> = (props) => {
return (
//... some JSX
)
}

// Version THREE (what I have in older examples I've done, but I don't know why)
const MyComponent: FC<MyComponentProps> = (props): ReactElement => {
return (
//... some JSX
)
}

Answer 1

最新的React Native模板已经有了React。FC完全移除。新模板中推荐的方法为

const SometimesFancyButton = ({text, fancy}: SometimesFancyButtonProps) => {
return fancy ? (<span className="fancy">{text}</span>) : text;
};

。输入props而不是组件返回类型，因为未定义的组件在导入时不会编译(这是我解释更改的方式)。查看讨论线程链接，感谢@Benjamin

https://github.com/facebook/create-react-app/pull/8177

---

//下面的原始(已弃用)答案是关于注释的上下文

版本2是最明确和简洁的。它告诉Typescript它需要某些道具，并在一条语句中返回一个功能组件。

这三个都是有效的，没有很大的缺点。版本1同时匹配函数组件和类组件，因此不太具体。版本3是多余的:因为组件已经被类型化了，所以函数的返回类型是不必要的。

TL;DR:我更喜欢第二个版本，但都很好。