反应类型 '{ hasInputs: boolean; bg：字符串； }' 不可分配给类型 'IntrinsicAttributes & boolean'

Question

我对反应还很陌生。我有这个错误。我将布尔值作为道具传递给组件。但这是我得到的完整错误；

Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'IntrinsicAttributes & boolean'.
Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'true'.ts(2322)

在我的 home.tsx 组件中，这就是我所拥有的

import React, { Component } from "react";
import Header from "../../components/Header";

export default class ProHome extends Component {
    render() {
        return (
            <div>
                <Header hasInputs={false} bg={'bg-blue-500'} />
           </div>
        );
    }
 }

然后在我的header.tsx这是我的

export default function Header(hasInputs: boolean, bg:string) {

    return (
        <div className={`h-2/3 ${bg} h-[500px] lg:h-screen lg:${bg}`}>
             {
                    hasInputs && <div className="flex w-full">
                    <input className="h-14 px-4 py-2 w-full" placeholder="Search Skill" />
                    <button className="bg-red-500 px-4 py-2 text-white">
                        <SearchIcon className="h-5 w-5"></SearchIcon>
                    </button>
                </div>
                }
        </div>
    );
 }

我收到上面列出的错误，即使 hasInputs 为 false，div 也会显示

Answer 1

传递到组件 Header 的参数可通过道具对象访问：

export default function Header(props: { hasInputs: boolean, bg: string }) {...}

然后您可以像这样访问组件内部的 hasInputs：props.hasInputs

反应类型 '{ hasInputs: boolean; bg：字符串； }' 不可分配给类型 'IntrinsicAttributes & boolean'

React Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'IntrinsicAttributes & boolean'

typescript

reactjs

react-typescript