reactjs – 是否可以在React渲染函数中使用if … else …语句？

发布时间：2020-12-15 20:55:31 所属栏目：百科来源：网络整理

导读：基本上,我有一个react组件,它的render()函数体如下:(这是我理想的一个,这意味着它目前不起作用) render(){ return ( div Element1/ Element2/ // note: code does not work here if (this.props.hasImage) MyImage / else OtherElement/ /div )} 不完全是这

基本上,我有一个react组件,它的render()函数体如下:(这是我理想的一个,这意味着它目前不起作用)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImage) <MyImage />
            else <OtherElement/>
        </div>
    )
}

不完全是这样,但有一些解决方法.在 React’s docs中有一个关于条件渲染的部分,你应该看看.以下是使用内联if-else可以执行的操作的示例.

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

你也可以在渲染函数中处理它,但在返回jsx之前.

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

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

值得一提的是ZekeDroid在评论中提到的内容.如果您只是检查条件并且不想呈现不符合的特定代码,则可以使用&&操作符.

return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!