Это путаница между конструкторами и экземплярами .
Помните, что когда вы пишете компонент в 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>;
}
@types/react
их, ее проще всего использоватьfunction RenderGreeting(Elem: React.ComponentType) { ... }
function renderGreeting(Elem: typeof React.Component)
в ES6?function renderGreeting (Elem: new() => React.SFC<any>){...}
если так, почему мы объявляем тип SFC следующим образом:,const Hello:React.SFC<any> = (props) => <div>Hello World</div>
а не: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; };
Я получаю сообщение об ошибке «Свойство« type »не существует для типа« typeof Component »».Если вы хотите взять класс компонента в качестве параметра (против экземпляра), используйте
React.ComponentClass
:источник
React.ComponentType<any>
тип вместо того, чтобы включать их.Когда я конвертирую из 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")
источник
tsconfig.json
) наallowSyntheticDefaultImports
. См .: typescriptlang.org/docs/handbook/compiler-options.html и обсуждение здесь: blog.jonasbandi.net/2016/10/…Если вы действительно не заботитесь о реквизите, то самый широкий из возможных типов
React.ReactType
.Это позволит передавать нативные элементы dom в виде строки.
React.ReactType
охватывает все это:источник
Если вы используете Material-UI , перейдите к определению типа компонента, который подчеркивается TypeScript. Скорее всего, вы увидите что-то подобное
У вас есть 2 варианта для устранения ошибки:
1.Добавить
.default
при использовании компонента в JSX:2. Переименуйте компонент, который экспортируется как «по умолчанию», при импорте:
Таким образом, вам не нужно указывать
.default
каждый раз, когда вы используете компонент.источник
Следующее работало для меня: https://github.com/microsoft/TypeScript/issues/28631#issuecomment-472606019 Я исправляю это, делая что-то вроде этого:
источник
В моем случае я использовал
React.ReactNode
тип вместо функционального компонентаReact.FC
.В этом компоненте быть точным:
источник
Как намекал @Jthorpe,
ComponentClass
разрешает толькоComponent
или нет,PureComponent
но неFunctionComponent
.Если вы попытаетесь передать a
FunctionComponent
, машинопись выведет ошибку, похожую на ...Тем не менее, используя,
ComponentType
а неComponentClass
вы допускаете в обоих случаях. В соответствии с файлом объявления реакции тип определяется как ...источник
В моем случае я отсутствовал
new
внутри определения типа.some-js-component.d.ts
файл:и внутри
tsx
файла, где я пытался импортировать нетипизированный компонент:источник
При объявлении компонента React Class используйте
React.ComponentClass
вместоReact.Component
него, чтобы исправить ошибку ts.источник
Ты можешь использовать
Однако работает ли следующее?
источник