Dies ist eine Verwechslung zwischen Konstruktoren und Instanzen .
Denken Sie daran, wenn Sie eine Komponente in React schreiben:
class Greeter extends React.Component<any, any> {
render() {
return <div>Hello, {this.props.whoToGreet}</div>;
}
}
Sie verwenden es so:
return <Greeter whoToGreet='world' />;
Sie verwenden es nicht so:
let Greet = new Greeter();
return <Greet whoToGreet='world' />;
Im ersten Beispiel geben wir Greeter
die Konstruktorfunktion für unsere Komponente weiter. Das ist die richtige Verwendung. Im zweiten Beispiel geben wir eine Instanz von weiter Greeter
. Das ist falsch und schlägt zur Laufzeit mit einem Fehler wie "Objekt ist keine Funktion" fehl.
Das Problem mit diesem Code
function renderGreeting(Elem: React.Component<any, any>) {
return <span>Hello, <Elem />!</span>;
}
ist, dass es eine Instanz von erwartet React.Component
. Was möchten Sie eine Funktion, die einen Konstruktor benötigt für React.Component
:
function renderGreeting(Elem: new() => React.Component<any, any>) {
return <span>Hello, <Elem />!</span>;
}
oder ähnlich:
function renderGreeting(Elem: typeof React.Component) {
return <span>Hello, <Elem />!</span>;
}
@types/react
function RenderGreeting(Elem: React.ComponentType) { ... }
function renderGreeting(Elem: typeof React.Component)
in ES6?function renderGreeting (Elem: new() => React.SFC<any>){...}
wenn ja, warum deklarieren wir die Art der SFCs wie folgt:const Hello:React.SFC<any> = (props) => <div>Hello World</div>
und nicht:const Hello: new() =>React.SFC<any> = (props) => <div>Hello World</div>
export const BackNavigationTextWrapper = (WrappedComponent: typeof React.Component) => { const BackNavigationTextWrappedComponent = (props, { commonElements = {} }: any) => { return <WrappedComponent {...props} backLabel={commonElements.backLabel || 'Go back to reservation details'} /> }; BackNavigationTextWrappedComponent.type = WrappedComponent.type; return BackNavigationTextWrappedComponent; };
Ich erhalte die Fehlermeldung "Eigenschaft 'Typ' existiert nicht für Typ 'Typ der Komponente'".Wenn Sie eine Komponentenklasse als Parameter (gegenüber einer Instanz) verwenden möchten, verwenden Sie
React.ComponentClass
:quelle
React.ComponentType<any>
Typ verwenden, um sie einzuschließen.Wenn ich von JSX nach TSX konvertiere und einige Bibliotheken als js / jsx behalten und andere nach ts / tsx konvertieren, vergesse ich fast immer, die Importanweisungen von js / jsx in den TSX \ TS-Dateien von zu ändern
import * as ComponentName from "ComponentName";
zu
import ComponentName from "ComponentName";
Wenn Sie eine alte JSX-Stilkomponente (React.createClass) von TSX aus aufrufen, verwenden Sie
var ComponentName = require("ComponentName")
quelle
tsconfig.json
) auf konfigurierenallowSyntheticDefaultImports
. Siehe: typescriptlang.org/docs/handbook/compiler-options.html und Diskussion hier: blog.jonasbandi.net/2016/10/…Wenn Sie sich wirklich nicht für Requisiten interessieren, ist der größtmögliche Typ
React.ReactType
.Dies würde die Übergabe nativer dom-Elemente als Zeichenfolge ermöglichen.
React.ReactType
deckt all dies ab:quelle
Wenn Sie material-ui verwenden , wechseln Sie zur Typdefinition der Komponente, die von TypeScript unterstrichen wird. Höchstwahrscheinlich werden Sie so etwas sehen
Sie haben zwei Möglichkeiten, um den Fehler zu beheben:
1. Fügen Sie
.default
bei Verwendung der Komponente in JSX Folgendes hinzu :2.Benennen Sie die Komponente, die exportiert wird, beim Importieren als "Standard" um:
Auf diese Weise müssen Sie nicht
.default
jedes Mal angeben, wenn Sie die Komponente verwenden.quelle
Folgendes hat bei mir funktioniert: https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019 Ich behebe das Problem, indem ich so etwas mache:
quelle
Wenn Sie die React-Klassenkomponente deklarieren, verwenden Sie
React.ComponentClass
stattdessenReact.Component
, um den ts-Fehler zu beheben.quelle
In meinem Fall habe ich
React.ReactNode
anstelle einesReact.FC
Typs einen Typ für eine Funktionskomponente verwendet.In dieser Komponente um genau zu sein:
quelle
Wie @Jthorpe angedeutet hat,
ComponentClass
erlaubt nur entwederComponent
oderPureComponent
aber nicht aFunctionComponent
.Wenn Sie versuchen, a zu übergeben
FunctionComponent
, gibt Typoskript einen Fehler aus, der ...Verwenden Sie jedoch beide Fälle ,
ComponentType
anstattComponentClass
sie zuzulassen. In der React-Deklarationsdatei ist der Typ definiert als ...quelle
In meinem Fall fehlte ich
new
in der Typdefinition.some-js-component.d.ts
Datei:und in der
tsx
Datei, in der ich versucht habe, die untypisierte Komponente zu importieren:quelle
Sie können verwenden
Funktioniert jedoch Folgendes?
quelle