React tsx 函数没有收到值答案

【问题标题】：React tsx function is not receiving valueReact tsx 函数没有收到值
【发布时间】：2020-08-26 20:31:22
【问题描述】：

我正在使用一个组件，它是一个返回导航栏的函数，具体取决于用户是否正在登录，为此我需要向该函数传递一个参数。

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 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 发生了什么，当 log F isLogged 返回一个 true，但是当 log NavBar 的 isLogged 返回一个 [Object Object]，当使用 debug 模式并检查什么有这个 var 时 var 是空的，就像 { ...false} 从不去 NavbarComponent(isLogged: boolean)... 有什么想法吗？ :(

【问题讨论】：

组件函数的参数是props对象。这是你得到的，而不是 isLogged。
false 是 JS 关键字，不能作为属性名。您正在将值 false 传播到您的组件上，这是没有意义的。 Navbar 中的 isLogged 是 props 对象，而不是布尔值。你需要解构 props 才能访问它们，但即使你这样做了，你仍然没有将 isLogged 传递给导航栏组件。
您没有使用 Typescript FunctionComponent 这会捕获您的错误。

标签： reactjs tsx

【解决方案1】：

简短的回答：

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

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

长答案：

要使用 typescript 正确捕获错误，您应该开始使用正确的类型声明组件：

type NavbarProps = {
  isLogged: boolean
}

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

export default NavbarComponent;

这会立即发现你的错误。

【讨论】：