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

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

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

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

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

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

60
material-ui reactjs typescript

5 ответов

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

помните, что когда вы пишете компонент в 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 на функции-конструктора для нашего компонента. Это правильное использование. Во втором примере, мы проходя около экземпляр of Greeter. Это неверно и приведет к сбою во время выполнения с ошибкой типа "объект не является функцией".

проблема с этим кодом

function renderGreeting(Elem: React.Component<any, any>) {
    return <span>Hello, <Elem />!</span>;
}

это то, что он ожидал экземпляр of 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>;
}
100

Если вы хотите взять класс компонента в качестве параметра (против экземпляра), используйте React.ComponentClass:

function renderGreeting(Elem: React.ComponentClass<any>) {
    return <span>Hello, <Elem />!</span>;
}
33

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

import * as ComponentName from "ComponentName";

to

import ComponentName from "ComponentName";

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

var ComponentName = require("ComponentName")

13

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

Это позволит передавать собственные элементы dom в виде строки. React.ReactType охватывает все эти:

renderGreeting('button');
renderGreeting(() => 'Hello, World!');
renderGreeting(class Foo extends React.Component {
   render() {
      return 'Hello, World!'
   }
});
2

если вы используете материал-ui, перейдите к определению типа компонента, которое подчеркивается TypeScript. Скорее всего, вы увидите что-то подобное

export { default } from './ComponentName';

у вас есть 2 варианта устранения ошибки:

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

import ComponentName from './ComponentName'

const Component = () => <ComponentName.default />

2.Переименуйте компонент, который экспортируется как "по умолчанию", при импорте:

import { default as ComponentName } from './ComponentName'

const Component = () => <ComponentName />

таким образом, вам не нужно указывать .default каждый время использования компонента.

1