javascript - React H1 绘制空白

Question

我是新手!

在这种非常基本的登录状态处理方面寻求一些帮助，以显示某人是登录/true 还是注销/false。

我有两个组件，一个是包含 isLoggedIn 的“状态”的主要布局。

另一个是我试图将该状态传递给的 header ，以进行显示。

但是尽管 Header 中的 console.log 正确记录了 true/false，但是当我尝试将其打印到 H1 元素中时 - 它失败了。

我试过查看 React chrome 工具 ext 并将其替换为 this.props.children 和 this.status 或 this.isLoggedIn 但没有任何乐趣。

我在这里做错了什么？

布局

export default class Layout extends React.Component {
constructor() {
  super();
  this.state = {
    isLoggedIn: false
  }
}

  render() {

    setTimeout(() => {
      this.setState({
        isLoggedIn: true
      })
    }, 2000);

    return (
      <div>
        <Header status={this.state.isLoggedIn} />
        <Footer />
      </div>
    )
  }
}

标题

export default class Header extends React.Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h1>{this.props.status}</h1>
      </div>

    )
  }
}

Answer 1

在我看来，您正在将状态设置为 bool 值，我认为该值不会在 h1 标记内呈现。如果你要将一个字符串传递给 status Prop ，我相信它会呈现该字符串，与数字相同。您的解决方案是将 bool 值转换为字符串，以便在页面上正确呈现。

使用类似的东西: { String( this.props.status ) }