【Typescript】报错：不能将xxx分配给“intrinsicAttribute“...

新生代农民工官方认证码农小拽

已于 2023-03-30 22:06:21 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Typescript 文章标签： typescript javascript 前端

于 2023-03-30 21:22:43 首次发布

本文链接：https://blog.csdn.net/tuzi007a/article/details/129866963

Typescript 专栏收录该内容

4 篇文章

订阅专栏

文章详细描述了在React应用中遇到的一个报错，该报错发生在父组件向子组件传递props时。通过三种方法解决了这个问题：明确子组件的类型定义、简化函数参数或直接在函数参数中指定props类型。这些解决方案可防止eslint警告并确保类型安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错复现

为了记录这个报错及处理，下面是代码复现：

src/App.tsx

import { useState } from "react";
import './app.less';
import Child from './Child';

const App: React.FC = () => {

    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
    }

    return <>
        <h3>hello react!</h3>
        <button
            className="btn"
            onClick={handleClick}
        >You click it {count} times.</button>
        {/* 这里报错 */}
        <Child count={count} />
    </>
}

export default App;

src/Child.tsx

type ChildProp = {
    count?: number
}

const Child: React.FC = (props: ChildProp) => {

    const { count } = props;

    return <h3>{count}</h3>
}

export default Child;

报错：
在这里插入图片描述

解决

原因是子组件里没有做声明限制。修改子组件代码

方法一

type ChildProp = {
    count?: number
}

const Child: React.FC<ChildProp> = (props: ChildProp) => {

    const { count } = props;

    return <h3>{count}</h3>
}

export default Child;

方法二

type ChildProp = {
    count?: number
}

const Child: React.FC<ChildProp>= ({ count }) => {

    return <h3>{count}</h3>
}

export default Child;

方法三

type ChildProp = {
    count?: number
}

const Child: React.FC<ChildProp> = ({ count }: ChildProp) => {

    return <h3>{count}</h3>
}

export default Child;