Что означает ошибка "тип элемента JSX '...' не имеет никаких сигнатур конструкции или вызова"?

Question

Что означает ошибка "тип элемента JSX '...' не имеет никаких сигнатур конструкции или вызова"?

Я написал код:

function renderGreeting(Elem: React.Component<any, any>) {

    return <span>Hello, <Elem />!</span>;

}

Я получаю сообщение об ошибке:

тип элемента JSX Elem не имеет никаких сигнатур конструкции или вызова

что это значит?

1158 5

typescript reactjs material-ui

5 ответов:

Comments

Ничего не найдено.

Ryan Cavanaugh · Accepted Answer · 2015-08-04 20:28:10

это путаница между конструкторы и экземпляров.

помните, что когда вы пишете компонент в React:
class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}
вы используете его таким образом:
return <Greeter whoToGreet='world' />;
вы не использовать его таким образом:
let Greet = new Greeter();
return <Greet whoToGreet='world' />;
в первом примере, мы проходим вокруг Greeter на функции-конструктора для нашего компонента. Это правильное использование. Во втором примере, мы проходя вокруг экземпляр на Greeter. Это неверно, и будет сбой во время выполнения с ошибкой, как "объект не является функцией".

проблема с этим кодом
function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}
это то, что он ожидал экземпляр на React.Component. Что вы хотите функция, которая принимает конструктор на React.Component:
function renderGreeting(Elem: new() => React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}
или же:
function renderGreeting(Elem: typeof React.Component) {
    return <span>Hello, <Elem />!</span>;
}

Luke · Accepted Answer · 2017-07-04 02:36:36

Если вы хотите взять класс компонента в качестве параметра (против экземпляра), используйте React.ComponentClass:
function renderGreeting(Elem: React.ComponentClass<any>) {
    return <span>Hello, <Elem />!</span>;
}

Michael · Accepted Answer · 2018-08-24 17:46:16

когда я конвертирую из JSX в TSX, и мы сохраняем некоторые библиотеки как js/jsx и конвертируем другие в ts/tsx, я почти всегда забываю изменить операторы импорта js / jsx в файлах TSX\TS из

import * as ComponentName from "ComponentName";

до

import ComponentName from "ComponentName";

при вызове старого JSX (React.createClass) компонент стиля из TSX, затем используйте

var ComponentName = require("ComponentName")

epsilon · Accepted Answer · 2018-09-03 00:04:21

Если вы действительно не заботятся о реквизите, то широкое типа React.ReactType.

Это позволит передавать собственные элементы dom в виде строки. React.ReactType охватывает все эти:
renderGreeting('button');
renderGreeting(() => 'Hello, World!');
renderGreeting(class Foo extends React.Component {
   render() {
      return 'Hello, World!'
   }
});

Eduard · Accepted Answer · 2018-07-05 16:36:48

если вы используете материал-ui, перейдите к определению типа компонента, который подчеркивается TypeScript. Скорее всего, вы увидите что-то вроде этого
export { default } from './ComponentName';
у вас есть 2 варианта устранения ошибки:

1.Добавить .default при использовании компонента в JSX:
import ComponentName from './ComponentName'

const Component = () => <ComponentName.default />
2.Переименуйте компонент, который экспортируется как "default", при импорте:
import { default as ComponentName } from './ComponentName'

const Component = () => <ComponentName />
таким образом, вам не нужно указывать .default каждый время использования компонента.