您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

是否可以在React render函数中使用if ... else ...语句?

是否可以在React render函数中使用if ... else ...语句?

不完全一样,但是有解决方法。在React的文档中有一节关于条件渲染,您应该看一下。这是使用内联if-else可以做什么的示例。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <logoutButton onClick={this.handlelogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

您也可以在render函数中处理它,但是要在返回jsx之前。

if (isLoggedIn) {
  button = <logoutButton onClick={this.handlelogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

还值得一提的是ZekeDroid在评论中提到的内容。如果您只是检查条件而又不想呈现不符合要求的特定代码,则可以使用&& operator

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
其他 2022/1/1 18:21:33 有583人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶