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

【问题标题】：TypeScript compiler error with React Stateless Function componentReact Stateless Function 组件的 TypeScript 编译器错误
【发布时间】：2018-05-28 01:04:14
【问题描述】：

我正在尝试在 TypeScript 中编写 React Stateless Function 组件。请看下面的代码：

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): error TS2322: Type '({ view, className, params, queryParams, store, refresh, style, children, title, router }: LinkPr...' is不可分配给类型“StatelessComponent”。键入'无效 | 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"

提前致谢！

【问题讨论】：

try React.SFC ...消息说：不可分配给类型“StatelessComponent”。如果错误消失，那么我们知道您只能使用状态组件使用此函数
不幸的是，这不起作用。这是错误：src/components/Link.tsx(17,13): error TS2707: Generic type 'SFC' requires 0 and 1 type arguments.
啊，感谢您的反馈尝试：const Link: React.SFC<LinkProps> = (props) => { return...your impl} 我们忘记了参数
嗨，格伦，不是这样，因为那只会用一个 props 变量替换我的解构。事实上，答案很接近@AluanHaddad 的评论。代码主体中有多个返回，其中一个没有返回元素 - 它说 return console.log(....)，因此返回一个 void（移植别人的代码！）。所以阿銮，如果你把你的评论作为答案，我会把它标记为正确的。谢谢你们俩的帮助。
是的，我将在代码运行后进行大量重构。目前从 ES2015 代码库中移植。

标签： reactjs typescript mobx mobx-react

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

只需删除接口 LinkProps 中的子项。我认为你应该阅读this

玩得开心。

【讨论】：