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>

在React中如何使用条件渲染？

1 个答案: