Typcript – IntrinsicAttributes и проблемы с типами детей при вводе компонентов React

Вопрос:

Я .tsx свои файлы React в .tsx и сталкиваюсь с этой проблемой.

Footer.tsx

const Footer = ({ children, inModal }) => ( <footer className={‘(inModal ? » in-modal» : «») }> <div> {children} </div> </footer> ); export default Footer;

ParentComponent.tsx

import Footer from ‘path/to/Footer’; export class ParentComponent extends React.Component<{ showSomething: (() => void) }> { render() { return ( <Footer> <Button onClick={() => this.props.showSomething()}>Add</Button> </Footer> ); } }

Под тегом <Footer> есть красная подчеркивание с ошибкой:

[ts] Тип ‘{children: Element; }’ is not assignable to type ‘IntrinsicAttributes & { children: any; } ‘не присваивается типу’ IntrinsicAttributes & {children: any; inModal: any; inModal: любое; }’. }”. Тип ‘{дети: Элемент; } ‘не присваивается типу’ {children: any; inModal: any; inModal: любое; }’. }”. Свойство ‘inModal’ отсутствует в типе ‘{children: Element; }’. }”.

Я не совсем уверен, как расшифровать это. Любая помощь будет принята с благодарностью.

Лучший ответ:

Ошибка указывает на то, что для компонента inModal Footer требуется inModal. Чтобы устранить проблему, вы можете:

Дайте ему значение по умолчанию:

const Footer = ({ children, inModal = false }) => …

Скажите машинописному документу, что он дополнительно:

const Footer = ({ children, inModal }: {children: any, inModal?: boolean}) => …

Или явно предоставляйте эту опору всякий раз, когда вы используете нижний колонтитул:

<Footer inModal={false}> … </Footer>