javascript - Typescript - 输入 React 组件时的 IntrinsicAttributes 和子类型问题

Question

我正在将我的 React 文件迁移到 .tsx并遇到过这个问题。

页脚.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] 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; }'.

我不太确定如何解读这意味着什么。任何帮助将不胜感激。

Answer 1

错误表明 Footer 组件需要传递一个 prop inModal 给它。要解决此问题，您可以:

给它一个默认值:

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

告诉 typescript 它是可选的:

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

或者在您使用页脚时明确提供该 Prop :

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