javascript - 在 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'
}

删除映射到渲染函数并在那里准备数据: function render() { var message=''; if (this.state.messages.length) { } } <b>{message}</b>