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

【问题标题】：React Type '{ hasInputs: boolean; bg: string; }' is not assignable to type 'IntrinsicAttributes & boolean'反应类型 '{ hasInputs: boolean; bg：字符串； }' 不可分配给类型 'IntrinsicAttributes & boolean'
【发布时间】：2021-05-04 15:00:36
【问题描述】：

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

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

【问题讨论】：

标签： reactjs typescript react-typescript

【解决方案1】：

传递给组件 Header 的参数可以通过 props 对象访问：

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

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

【讨论】：