React:我可以在呈现状态之前检查状态是否存在

Question

我是React的新手,我创建了一个显示用户名用户的导航栏

<NavItem eventKey={4} href="#">{this.state.name}</NavItem>

但问题是如果用户没有登录,由于this.state.name未定义,我收到错误.有没有什么方法可以检查this.state.name是否在将其作为导航栏的一部分进行定义之前定义,还是有更好的方法来摆脱这个错误？

Answer 1

当然,使用三元:

render() {
  return (
    this.state.name ? <NavItem>{this.state.name}</NavItem> : null
  );
}

甚至更短

render() {
  return (
    this.state.name && <NavItem>{this.state.name}</NavItem>
  );
}