时间戳

首页 > 解决方案 > 如何在 react + socket io 应用程序中显示聊天

reactjs - 如何在 react + socket io 应用程序中显示聊天

问题描述

我的聊天在我的第一个反应应用程序实例上正确显示，但在第二个应用程序实例上却没有。 https://imgur.com/a/7FVCvjW

我不知道出了什么问题。我找不到任何原因导致（共享的图像的右侧）无法正确显示；

export const Message = ({ message, name }) => {
  const style = (sender) => {
    if (sender === "admin") {
      return "admin";
    } else if (sender === name) {
      return "user";
    } else {
      return "other";
    }
  };

  return (
    <Fragment>
      <div className="messageContainer">
        <p className={`content ${style(message.user)}`}>{message.message}</p>
        {name === message.user ? null : (
          <p className="sender">{message.user}</p>
        )}
      </div>
    </Fragment>
  );
};

CSS

.content {
  margin-right: 10px;
}
.admin {
  color: rgb(156, 156, 156);
}

.user {
  background-color: rgba(255, 255, 255, 0.712);
  display: inline;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888888;
  margin-left: auto;
}

.other {
  background-color: rgba(255, 255, 255, 0.712);
  display: inline;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888888;
}

.messageContainer {
  display: flex;
  align-items: center;
}

.sender {
  color: rgb(156, 156, 156);
}

标签： reactjs

解决方案

只需删除：

  if (sender === "admin") {
   return "admin";
  } else

如果你真的需要用一个标志来处理这个，而不是name使用user = {name, isAdmin}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    <style type="text/css">
      h3 {
        color: white;
      }
      .content {
        margin-right: 10px;
      }

      .admin {
        color: rgb(156, 156, 156);
      }
      .user {
        background-color: rgba(255, 255, 255, 0.712);
        display: inline;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #888888;
        margin-left: auto;
      }

      .other {
        background-color: rgba(255, 255, 255, 0.712);
        display: inline;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #888888;
      }

      .messageContainer {
        display: flex;
        align-items: center;
      }

      .sender {
        color: rgb(156, 156, 156);
      }
    </style>
  </head>
  <body style="background: blue">
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
    <script type="text/babel">
      const {Fragment} = React;

      const Message = ({ message, name }) => {
        const style = (sender) => {
          // if (sender === "admin") {
          //  return "admin";
          // } else 
          if (sender === name) {
            return "user";
          } else {
            return "other";
          }
        };
        return (
          <Fragment>
            <div className="messageContainer">
              <p className={`content ${style(message.user)}`}>{message.message}</p>
              
              {name === message.user ? null : (
                <p className="sender">{message.user}</p>
              )}

            </div>
          </Fragment>
        );
      };

      const App = () => {
        return (
          <Fragment>
            <h3>From Jonh's point of view</h3>
            <ul>
              <Message message={{user: "john", message: "Hi"}} name="john"/>
              <Message message={{user: "mary", message: "Hey from user"}} name="john"/>
            </ul>
            <h3>From  Mary's point of view</h3>
            <ul>
              <Message message={{user: "john", message: "Hi"}} name="mary"/>
              <Message message={{user: "mary", message: "Hey from user"}} name="mary"/>
            </ul>
            <h3>From an anonymous point of view</h3>
            <ul>
              <Message message={{user: "john", message: "Hi"}} name=""/>
              <Message message={{user: "mary", message: "Hey from user"}} name=""/>
            </ul>
          </Fragment>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

推荐阅读