React tsx函数未收到值

问题描述

我使用的组件是根据用户是否登录而返回导航栏的函数，为此，我需要向该函数传递参数。

index.js总是调用NavBar类

    render() {
    const isLogged: boolean = true as boolean;
    console.log("F isLogged " + isLogged);
    
    return (  
      <>
      <NavbarComponent {...false}/>
      <h2>It is {this.state.data}.</h2>
      </>
    );
  }

此NavBar类调用有问题的组件NavbarComponent

export default function NavbarComponent(isLogged: boolean) {
  console.log("isLogged " + (isLogged as boolean));
  ...
    <div>
        <main
        className={clsx(classes.content,{
          [classes.contentShift]: open,})} />
        {isLogged == true ? 
          renderMenuLogged:
          renderMenuLogin}
    </div>

[Log] F isLogged true (2.chunk.js,line 63)
[Log] F isLogged true (2.chunk.js,line 63)
[Log] isLogged [object Object] (2.chunk.js,line 272)
[Log] isLogged [object Object] (2.chunk.js,line 272)
[Log] F isLogged true (2.chunk.js,line 272)

在日志中发生了什么，当日志F isLogged返回true时，但是当日志NavBar的isLogged返回一个[Object Object]时，在使用调试模式并检查此var是否为空时，就像{ ... false}永远不要去NavbarComponent（isLogged：boolean）...有什么想法吗？ ：（

解决方法

简短答案：

参数声明中缺少{和}。请注意，isLogged不是您的功能组件的参数。 props对象是参数：

export default function NavbarComponent({ isLogged: boolean }) {

长答案：

要正确捕获打字稿错误，您应该开始声明具有正确类型的组件：

type NavbarProps = {
  isLogged: boolean
}

const NavbarComponent: React.FunctionComponent<NavbarProps> = ({ isLogged }) => {
  ...
};

export default NavbarComponent;

那将立即捕获您的错误。