React无状态函数组件的TypeScript编译器错误

Question

我试图在TypeScript中编写一个React无状态函数组件。请参见以下代码：

import * as React from 'react';
import {observer} from 'mobx-react';

export interface LinkProps {
    view: any;
    className: any;
    params?: any;
    queryParams?: any;
    store?: any;
    refresh: boolean;
    style?: any;
    children: any;
    title?: any;
    router: any;
}

const Link: React.SFC<LinkProps> = (   // <----- Error on this line
    {
        view,
        className,
        params = {},
        queryParams = {},
        store = {},
        refresh = false,
        style = {},
        children,
        title = children,
        router = store.router
    }) => {
    ...
}

export default observer(Link);

然而，编译器在const Link上给了我一个错误：

src/components/Link。tsx（17,7）：错误TS2322:Type“（{view，className，params，queryParams，store，refresh，style，children，title，router}:LinkPr…”不可分配给类型“无状态组件”。类型“void | Element”不可分配给类型“ReactElement”。类型“void”不可分配给类型“ReactElement”。

我做错了什么？

以下是我的pckage中的版本依赖项。json文件：

"@types/react": "^16.0.29",
"@types/react-dom": "^16.0.3",
"del-cli": "^1.1.0",
"mobx": "^3.4.1",
"mobx-react": "^4.3.5",
"react": "^16.2.0",
"typescript": "^2.6.2"

提前感谢！

Answer 1

只需删除LinkProps界面中的孩子。我认为你应该读一下这个

玩得开心。

Answer 2

如果不返回JSX元素，就会发生这种情况。此外，如果您返回一个返回JSX元素的函数，那么问题也会发生。为了避免这个问题，您可以返回

<React.Fragment>
    {yourFunction()}
</React.Fragment>