React 无状态组件的 TypeScript 返回类型是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44133420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the TypeScript return type of a React stateless component?
提问by ahstro
What would the return type be here?
这里的返回类型是什么？
const Foo
: () => // ???
= () => (
<div>
Foobar
</div>
)
回答by Timo
StatelessComponent type mentioned in this answerhas been deprecated because after introducing the Hooks API they are not always stateless.
此答案中提到的 StatelessComponent 类型已被弃用，因为在引入 Hooks API 后，它们并不总是无状态的。
A function component is of type React.FunctionComponentand it has an alias React.FCto keep things nice and short.
一个函数组件是有类型的React.FunctionComponent，它有一个别名React.FC来保持简洁。
It has one required property, a function, which will return a ReactElementor null. It has a few optional properties, such as propTypes, contextTypes, defaultPropsand displayName.
它有一个必需的属性，一个函数，它将返回一个ReactElement或null。它有几个可选的属性，如propTypes，contextTypes，defaultProps和displayName。
Here's an example:
下面是一个例子：
const MyFunctionComponent: React.FC = (): ReactElement => {
return <div>Hello, I am a function component</div>
}
And here are the types from @types/react 16.8.24:
以下是来自@types/react 16.8.24 的类型：
type FC<P = {}> = FunctionComponent<P>;
interface FunctionComponent<P = {}> {
(props: PropsWithChildren<P>, context?: any): ReactElement | null;
propTypes?: WeakValidationMap<P>;
contextTypes?: ValidationMap<any>;
defaultProps?: Partial<P>;
displayName?: string;
}
回答by ahstro
The correct return type here is ReactElement<P>, but a better option would be to use React.StatelessComponent<P>like this
此处正确的返回类型是ReactElement<P>，但更好的选择是React.StatelessComponent<P>像这样使用
const Foo
: React.StatelessComponent<{}>
= () => (
<div>
Foobar
</div>
)
回答by htaidirt
I would also add .SFC, which stands for Stateless Functional Component.
我还要添加.SFC，它代表无状态功能组件。
const Foo
: React.SFC<{}>
= () => (
<div>
Foobar
</div>
)
回答by Juan Mendes
See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
见https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children).
每个 JSX 元素只是调用 React.createElement(component, props, ...children) 的语法糖。
function createElement<P extends DOMAttributes<T>, T extends Element>(
type: string,
props?: ClassAttributes<T> & P,
...children: ReactNode[]): DOMElement<P, T>;
So it's DOMElement<P, T>
所以就是 DOMElement<P, T>
回答by Vishal Sakaria
interface ISomeCoolInterface {
some: 'string';
cool: 'string';
props: 'string'
}
const SomeCoolComponent
: React.FC<ISomeCoolInterface>
= ({ some, cool, props }): JSX.Element => {
return <SomeCoolComponent>{some, cool, props}</SomeCoolComponent>
}
The important bit here being the return type JSX.Element
这里重要的一点是返回类型 JSX.Element
