Question

我在这里有所有这个组件，对于聊天应用程序，有2个视图，1个用于经销商，另一个用于玩家

  render () {
    let messages = this.props.chatMessages.map((message) => {
      return <ChatItem info={message.info} me={message.me} player={message.player} message={message.message} />;
    });

    let chatForm, hr, dealerMode, playerMode;

    if (this.props.mode === 'player') {
      hr = <hr />;
      chatForm = <ChatForm onAddMessage={this.addMessage} />;
      playerMode = <ul className="Chat__player--messages" ref="messages">{messages}</ul>;
    }

    if (this.props.mode === 'dealer') {
      dealerMode = <ul className="Chat__dealer--messages" ref="messages">{messages}</ul>;
    }

    return <div className="Chat">
      <div className="Chat__player">
        {playerMode}
        {hr}
        {chatForm}
      </div>
      <div className="Chat__dealer">
        {dealerMode}
      </div>
    </div>;
  }

到目前为止，我已经有了，但是工作得不好。当您在经销商视图中时，您可以看到这个<div className="Chat__player">的一小部分线，即使没有出现。

我试着做了

    return <div className="Chat">
      if (this.props.mode === 'player') {
        <div className="Chat__player">
           {playerMode}
           {hr}
           {chatForm}
        </div>
      }
      <div className="Chat__dealer">
        {dealerMode}
      </div>
    </div>;

但我得到的是在浏览器中打印的if语句。

Answer 1

由于<div className="Chat__player">将始终显示您想要在经销商情况下根本不打印它（您在第二个示例中有正确的想法，但它不是有效的JSX）。以下是两种可能的方法（多种方式）

修改第二个示例以使用三元：

return <div className="Chat">
  {this.props.mode === 'player' ? 
    <div className="Chat__player">
      {playerMode}
      {hr}
      {chatForm}
    </div> : null}

  {this.props.mode === 'dealer' ? 
    <div className="Chat__player">
      {dealerMode}
    </div> : null}
</div>;

或没有三元：

let display;
let messagesList = <ul className="Chat__dealer--messages" ref="messages">{messages}</ul>;

if (this.props.mode === 'player') {
  display = <div className="Chat__player">
    {messagesList}
    <hr />
    <ChatForm onAddMessage={this.addMessage} />
  </div>
}

if (this.props.mode === 'dealer') {
  display = <div className="Chat__dealer">
    {messagesList}
  </div>
}

return <div className="Chat">
  {display}
</div>;

Answer 2

有一个很好的例子，隐藏在False in JSX文档中的条件元素：

<div>{x > 1 && 'You have more than one item'}</div>

改编自您的示例：

return <div className="Chat">
    {this.props.mode === 'player' &&
        <div className="Chat__player">
            {playerMode}
            {hr}
            {chatForm}
        </div>}
    <div className="Chat__dealer">
        {dealerMode}
    </div>
</div>;

如何在Reactjs中正确显示和隐藏元素

2 个答案: