在React中，我如何在渲染中使用条件

In React how do I use a conditional with rendering?

本文关键字：条件 React      更新时间：2023-09-26

我有一个简单的通知窗口，当接受/拒绝通知时，我会从notifications数组中删除对象。

这是我处理显示消息的代码：

render: function() {
  return (
      <div className="chatwindowheight">
        <div className="row">
          <div className="large-12 columns">
            <div className="large-8 columns">
              <p className="thin partyHeader">Party <i className="fa fa-minus-square-o"></i></p>
            </div>
            <div className="large-4 columns">
              <i className="fa fa-users pull-right"></i>
            </div>
          </div>
        </div>
        <div className="row chatwindowheight">
          <div className="large-12 small-12 columns chatwindow" id="scrolldown">
          <br/>
            {
              this.state.messages.map((message, i) => {
                return (
                    <MessageComponent key={i}
                                      username={message.username}
                                      message={message.message}
                                      whos={message.classed} />
                  );
              })
            }
          </div>
        </div>
      <ChatSendComponent onChatSubmit={this.handleChatSubmit}/>
    </div>
  )
}

我想要的是像一样的东西

if (this.state.messages.length === 0) {
  return (
    <p>You have no new notifications.</p>
  )    
}

但当我试图将类似的东西包裹在当前循环中时，它告诉我if是一个错误。React的新手，所以只是想了解处理这个问题的最佳方法。谢谢

有一些不同的方法可以解决您的问题：1.

{ this.state.messages.length > 0 ?
  this.state.messages.map((message, i) => {
    return (
     <MessageComponent key={i}
       username={message.username}
       message={message.message}
       whos={message.classed} />
     );
 }) : 'You have messages'
}
  1. 移除映射到渲染函数并在那里准备数据： function render() { var message=''; if (this.state.messages.length) { } } <b>{message}</b>
相关文章：