Question

我是新手！

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

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

另一个是我试图将该状态传递给显示的标题。

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

我已经尝试查看React chrome工具分机并将其交替使用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

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

使用类似的东西： range.set({ values: [[1, 2], [3, 4]], format: { fill: { color: "purple" } } }

反应H1画一个空白

1 个答案: