Apa artinya kesalahan "jenis elemen JSX '...' tidak memiliki konstruk atau tanda tangan panggilan"?

Saya menulis beberapa kode:

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

Saya mendapatkan kesalahan:

Tipe elemen JSX Elemtidak memiliki tanda tangan konstruksi atau panggilan

Apa artinya?

Ini adalah kebingungan antara konstruktor dan instance .

Ingat bahwa ketika Anda menulis komponen di Bereaksi:

class Greeter extends React.Component<any, any> {
    render() {
        return <div>Hello, {this.props.whoToGreet}</div>;
    }
}

Anda menggunakannya dengan cara ini:

return <Greeter whoToGreet='world' />;

Anda tidak menggunakannya dengan cara ini:

let Greet = new Greeter();
return <Greet whoToGreet='world' />;

Dalam contoh pertama, kita sedang melewati Greeter, fungsi konstruktor untuk komponen kita. Itu penggunaan yang benar. Pada contoh kedua, kami membagikan turunan dari Greeter. Itu salah, dan akan gagal saat runtime dengan kesalahan seperti "Objek bukan fungsi".

Masalah dengan kode ini

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

adalah bahwa ia mengharapkan turunan dari React.Component. Apa yang Anda inginkan fungsi yang mengambil konstruktor untuk React.Component:

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

atau serupa:

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

Jika Anda ingin mengambil kelas komponen sebagai parameter (vs contoh), gunakan React.ComponentClass:

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

Ketika saya mengkonversi dari JSX ke TSX dan kami menyimpan beberapa perpustakaan sebagai js / jsx dan mengonversi yang lain ke ts / tsx, saya hampir selalu lupa untuk mengubah pernyataan impor js / jsx di file TSX \ TS dari

import * as ComponentName from "ComponentName";

untuk

import ComponentName from "ComponentName";

Jika memanggil komponen gaya JSX (React.createClass) tua dari TSX, maka gunakan

var ComponentName = require("ComponentName")

Jika Anda benar-benar tidak peduli dengan alat peraga maka jenis yang seluas mungkin adalah React.ReactType.

Ini akan memungkinkan lewat elemen dom asli sebagai string. React.ReactTypemencakup semua ini:

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

Jika Anda menggunakan material-ui , pergi ke ketik definisi komponen, yang digarisbawahi oleh TypeScript. Kemungkinan besar Anda akan melihat sesuatu seperti ini

export { default } from './ComponentName';

Anda memiliki 2 opsi untuk menyelesaikan kesalahan:

1.Tambahkan .defaultketika menggunakan komponen di JSX:

import ComponentName from './ComponentName'

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

2. Ganti nama komponen, yang diekspor sebagai "default", ketika mengimpor:

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

const Component = () => <ComponentName />

Dengan cara ini Anda tidak perlu menentukan .defaultsetiap kali Anda menggunakan komponen.

Berikut ini berfungsi untuk saya: https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019 Saya memperbaikinya dengan melakukan sesuatu seperti ini:

const Component = (isFoo ? FooComponent : BarComponent) as React.ElementType

Dalam kasus saya, saya menggunakan React.ReactNodesebagai tipe untuk komponen fungsional, bukan React.FCtipe.

Dalam komponen ini tepatnya:

export const PropertiesList: React.FC = (props: any) => {
  const list:string[] = [
    ' Consequat Phasellus sollicitudin.',
    ' Consequat Phasellus sollicitudin.',
    '...'
  ]

  return (
    <List
      header={<ListHeader heading="Properties List" />}
      dataSource={list}
        renderItem={(listItem, index) =>
          <List.Item key={index}> {listItem } </List.Item>
      }
    />
  )
}

Sebagai @Jthorpe disinggung, ComponentClasshanya memungkinkan baik Componentatau PureComponenttapi bukan FunctionComponent.

Jika Anda mencoba untuk melewatkan FunctionComponent, naskah akan melontarkan kesalahan yang mirip dengan ...

Type '(props: myProps) => Element' provides no match for the signature 'new (props: myProps, context?: any): Component<myProps, any, any>'.

Namun, dengan menggunakan ComponentTypedaripada yang ComponentClassAnda izinkan untuk kedua kasus. Per file deklarasi reaksi jenisnya didefinisikan sebagai ...

type ComponentType<P = {}> = ComponentClass<P, any> | FunctionComponent<P>

Dalam kasus saya, saya tidak ada newdi dalam definisi tipe.

some-js-component.d.ts mengajukan:

import * as React from "react";

export default class SomeJSXComponent extends React.Component<any, any> {
    new (props: any, context?: any)
}

dan di dalam tsxfile tempat saya mencoba mengimpor komponen yang tidak diketik:

import SomeJSXComponent from 'some-js-component'

const NewComp = ({ asdf }: NewProps) => <SomeJSXComponent withProps={asdf} />

Ketika mendeklarasikan komponen React Class, gunakan React.ComponentClass alih-alih React.Componentitu akan memperbaiki kesalahan ts.

Kamu bisa memakai

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

Namun, apakah cara berikut ini berhasil?

function renderGreeting(Elem: React.ComponentType) {
    const propsToPass = {one: 1, two: 2};

    return <span>Hello, <Elem {...propsToPass} />!</span>;
}