Question

我正在将我的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; }'无法分配给type 'IntrinsicAttributes＆{children：any; inModal：任何； }'。输入'{ 子元素： }'不能分配给类型'{children：any; inModal：任何； }'。类型'{children：Element;类型中缺少属性'inModal'。 }'。

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

Answer 1

该错误表明Footer组件需要将道具inModal传递给它。要解决此问题，您可以：

为其提供默认值：

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

告诉打字稿它是可选的：

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

或在使用页脚时明确提供该道具：

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

打字稿-键入React组件时IntrinsicAttributes和子类型问题

1 个答案: