React Stateless Function 组件的 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: 类型 '({ view, className, params, queryParams, store, refresh, style, children, title, router }: LinkPr... ' 不可分配给类型 'StatelessComponent'。类型 '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

如果您没有 return JSX 元素，就会发生这种情况。另外，如果你 return 一个函数 return 是一个 JSX 元素，这个问题也会发生。为避免此问题，您可以将 return <React.Fragment> 作为空元素并将您的函数放入其中：

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

Answer 2

只需删除界面 LinkProps 中的子项。我认为你应该阅读

玩得开心。

React Stateless Function 组件的 TypeScript 编译器错误

TypeScript compiler error with React Stateless Function component

typescript

reactjs

mobx

mobx-react