在React中，如何使用條件渲染？

Question

我有一個簡單的通知窗口，當通知被接受/拒絕時，我從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的新手，所以只想了解實現此目標的最佳方法。 謝謝！

Answer 1

有一些解決您的問題的方法：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'
}

2. 刪除您映射到render函數的代碼，並在那里准備數據： function render() { var message=''; if (this.state.messages.length) { } } <b>{message}</b> function render() { var message=''; if (this.state.messages.length) { } } <b>{message}</b>