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

hlswsv35 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(140)

我正在将React文件迁移到.tsx，遇到了这个问题。

页脚.tsx

const Footer = ({ children, inModal }) => (
    <footer className={'(inModal ? " in-modal" : "") }>
        <div>
            {children}
        </div>
    </footer>
);

export default Footer;

父组件.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]键入“{子项：“元素; }"不能赋给类型”IntrinsicAttributes & {子级：任意;模态：任意;}“。类型为”{子级：元素; }"不能赋给类型“{ children：任意;模态：any;}“。类型”{ children：元素;}“。
我不太清楚该如何解读那是什么意思。如果能提供帮助，我将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/51161409/typescript-intrinsicattributes-and-children-type-issues-when-typing-react-comp

2条答案

按热度按时间

cbjzeqam1#

该错误指示Footer组件需要向其传递属性inModal。要解决此问题，您可以：
给予它一个默认值：

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

告诉打印脚本它是可选的：

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

或者在使用页脚时显式提供该属性：

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

赞(0）回复(0）举报 2023-01-29

lokaqttq2#

我看到你的代码，发现你没有指定类型的inModal prop ，我相信这是一个很好的实践来定义接口这样：

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

你可以这样修改它：

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

export class ParentComponent extends React.Component<FooterPropsType> {

赞(0）回复(0）举报 2023-01-29

我来回答

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

2条答案

相关问题

热门标签

最新问答