javascript - Typescript - IntrinsicAttributes and children type issues when typing React components - Stack Overflow

admin管理员组

文章数量:1208155

I am migrating my React files to .tsx and have come across this issue.

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>
        );
    }
}

There is a red underline underneath the <Footer> tag with the error:

[ts] Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & { children: any; inModal: any; }'. Type '{ children: Element; }' is not assignable to type '{ children: any; inModal: any; }'. Property 'inModal' is missing in type '{ children: Element; }'.

I'm not quite sure how to decipher what that means. Any help would be greatly appreciated.

I am migrating my React files to .tsx and have come across this issue.

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>
        );
    }
}

There is a red underline underneath the <Footer> tag with the error:

[ts] Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & { children: any; inModal: any; }'. Type '{ children: Element; }' is not assignable to type '{ children: any; inModal: any; }'. Property 'inModal' is missing in type '{ children: Element; }'.

I'm not quite sure how to decipher what that means. Any help would be greatly appreciated.

• javascript
• reactjs
• typescript

Share Improve this question Follow edited Jul 3, 2018 at 19:45 noblerare asked Jul 3, 2018 at 19:04 noblerarenoblerare 11.9k2626 gold badges9191 silver badges164164 bronze badges 3

• Do you still get the error if you give inModal a default value of false in your Footer component? const Footer = ({ children, inModal = false }) ... – Tholle Commented Jul 3, 2018 at 19:07
• No, the error goes away when I give a default value. Would you mind explaining why that is and I can accept your answer? – noblerare Commented Jul 3, 2018 at 19:12
• I think CRice gave a very nice answer below. – Tholle Commented Jul 3, 2018 at 19:14

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 15

The error is indicating that the Footer component requires a prop inModal to be passed to it. To fix the issue, you can either:

Give it a default value:

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

Tell typescript that it's optional:

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

Or explicitly provide that prop whenever you use the footer:

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

I see your code and find you have not specify the type of inModal props, I believe it’s a good prectice to define interface like that:

export class ParentComponent extends React.Component<{ showSomething: (() => void) }> {

you can modify this something like this:

interface FooterPropsType{
showSomething?:()=> void,
isModal?: boolean,
}

export class ParentComponent extends React.Component<FooterPropsType> {

本文标签：