Ошибка компилятора TypeScript с компонентом React Stateless Function

Я пытаюсь закодировать компонент React Stateless Function в TypeScript. Пожалуйста, посмотрите код ниже:

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 ...' не назначается Тип "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"

Заранее спасибо!


reactjs typescript mobx mobx-react
person Naresh    schedule 14.12.2017    source источник
comment
попробуйте React.SFC ‹LinkProps, {}› ... в сообщении говорится: не может быть назначен типу StatelessComponent. Если ошибка исчезнет, ​​значит, мы знаем, что вы можете работать с этой функцией только с компонентом состояния.   -  person theforce    schedule 14.12.2017
comment
К сожалению, это не работает. Вот ошибка: src / components / Link.tsx (17,13): ошибка TS2707: для универсального типа «SFC» требуется от 0 до 1 аргумента типа.   -  person Naresh    schedule 14.12.2017
comment
ах, спасибо за ваш отзыв, попробуйте: const Link: React.SFC<LinkProps> = (props) => { return...your impl} мы забыли аргумент   -  person theforce    schedule 14.12.2017
comment
Это могло произойти, если вы забыли написать return.   -  person Aluan Haddad    schedule 14.12.2017
comment
Привет, Глен, это не так, потому что это просто заменит мою деструктуризацию одной переменной props. Фактически, ответ близок к комментарию @AluanHaddad. В теле кода было несколько возвратов, и один из них не возвратил элемент - он сказал return console.log(....), таким образом вернув пустоту (перенос чужого кода!). Итак, Алуан, если вы запишете свой комментарий в качестве ответа, я отмечу его как правильный. Спасибо вам обоим за помощь.   -  person Naresh    schedule 14.12.2017
comment
Я рад, что вы нашли проблему. На самом деле это было всего лишь предположение с моей стороны. Я думаю, что интересно, что у вас была серия ветвей и один отсутствующий возврат. Возможно, было бы неплохо извлечь логические пути из их ветвей в локальные функции, чтобы избежать подобных проблем.   -  person Aluan Haddad    schedule 14.12.2017
comment
Да, я проведу обширный рефакторинг, как только получу запуск кода. В настоящее время переносится из базы кода ES2015.   -  person Naresh    schedule 14.12.2017

Ответы (2)


arrow_upward
0
arrow_downward

Просто удалите потомков в интерфейсе LinkProps. И я думаю, вам следует прочитать это

Повеселись.

person Chris Nguyen    schedule 25.06.2019

arrow_upward
3
arrow_downward

Это произойдет, если вы не вернете элемент JSX. Также, если вы вернете функцию, которая возвращает элемент JSX, проблема также возникнет. Чтобы избежать этой проблемы, вы можете просто вернуть <React.Fragment> как пустой элемент и поместить в него свою функцию:

<React.Fragment>
    {yourFunction()}
</React.Fragment>
person Aram Vardanyan    schedule 27.02.2019