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

intrinsicAttribute

• 报错复现
• 解决

报错复现

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

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;

如果后续有eslint报错，可以按照这个做xxx is missing…，可以一劳永逸的解决。