Я пишу Компонент Контейнера TypeScript, и там я использую несколько Компонентов, также сделанных в TS. Компилятор выдает следующие предупреждения:
index.tsx:256:12 - error TS2322: Type '{ className: string; data-test: string; items: { name: string; url: string; }[]; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'className' does not exist on type 'IntrinsicAttributes & Props'.
Дело в том, что я не уверен, что с ним не так. Я посмотрел на определение JSX.Elem в d.types
. и нашел это:
// tslint:disable-next-line:no-empty-interface
interface IntrinsicAttributes extends React.Attributes { }
// tslint:disable-next-line:no-empty-interface
interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> { }
Компоненты, которые я залил на них, есть в общем 4 с похожими ошибками. Здесь вы можете найти ссылку на то, как я использую компоненты. Помните, что этот метод рендеринга не является общим методом рендеринга, я также вызываю его:
renderStaticPageComponents = (): JSX.Element => (
<Fragment>
<div className="row">
<div className="col">
<Breadcrumb
className="py-2"
data-test="basic-mode-breadcrumb"
items={[{ name: 'Admin', url: '' }, { name: 'Users', url: '/management/users' }]}
/>
</div>
<div className="col-auto">
<a href="#" rel="noopener noreferrer" target="_blank">
<Icon icon="question-circle-o" className="fa-lg" />
</a>
</div>
</div>
<PageHeader className="heading-title" dtata-test="basic-mode-header">
Users
</PageHeader>
</Fragment>
);
Все методы рендеринга, используемые компонентами, имеют типы JSX.Element | null
. Я думал, что если я удалю их и оставлю их как тип, так что компилятор не будет о них кричать, но проблема на самом деле в другом месте.
Не могли бы вы объяснить мне проблему здесь и ее решение? Может быть, мне нужен другой тип JSX .... для таких рендеров? Спасибо !!