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

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

  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>;
  }

render（）{
让消息=this.props.chatMessages.map（（消息）=>{
回来
});
让chatForm、hr、dealerMode、playerMode；
如果（this.props.mode=='player'）{
hr=
；
chatForm=；
playerMode=
{messages}
；
}
如果（this.props.mode==‘经销商’）{
dealerMode=
{messages}
；
}
回来
{playerMode}
{hr}
{chatForm}
{dealerMode}
;
}

就我目前所知，它工作正常，但不正常。当您在“经销商”视图中时，您可以看到此

的一小行，即使没有显示任何内容

我试着这样做

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

返回
如果（this.props.mode=='player'）{
{playerMode}
{hr}
{chatForm}
}
{dealerMode}
;

但是我得到的是

如果
语句打印在浏览器中。
因为
总是显示在经销商的情况下您根本不想打印它（您在第二个示例中的想法是正确的，但它不是有效的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>;

返回
{this.props.mode=='player'？
{playerMode}
{hr}
{chatForm}
：null}
{this.props.mode==='经销商'？
{dealerMode}
：null}
;

或不带三元：

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>;

let显示；
让messagesList=
{messages}
；
如果（this.props.mode=='player'）{
显示=
{messagesList}

}
如果（this.props.mode==‘经销商’）{
显示=
{messagesList}
}
回来
{display}
;
因为在经销商的情况下，
总是显示您根本不想打印它（您在第二个示例中的想法是正确的，但它不是有效的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>;

返回
{this.props.mode=='player'？
{playerMode}
{hr}
{chatForm}
：null}
{this.props.mode==='经销商'？
{dealerMode}
：null}
;

或不带三元：

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>;

let显示；
让messagesList=
{messages}
；
如果（this.props.mode=='player'）{
显示=
{messagesList}

}
如果（this.props.mode==‘经销商’）{
显示=
{messagesList}
}
回来
{display}
;
文档中有一个很好的条件元素示例：

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

{x>1&&“您有多个项目”}

根据您的示例进行调整：

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

返回
{this.props.mode==='player'&&
{playerMode}
{hr}
{chatForm}
}
{dealerMode}
;
文档中有一个很好的条件元素示例：

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

{x>1&&“您有多个项目”}

根据您的示例进行调整：

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

返回
{this.props.mode==='player'&&
{playerMode}
{hr}
{chatForm}
}
{dealerMode}
;
我有点累了，遇到了一个rt if指令，它可以满足您的需要（在页面上向下滚动）。不过，如果没有React模板，可能会有一个很好的答案！这可能很有用：我有点累了，遇到了一个rt if指令，它可以满足您的需要（在页面上向下滚动）。不过，如果没有React模板，可能会有一个很好的答案！这可能有用：