如何在聊天室中將聊天條目右對齊？

Question

我有一個反應聊天應用程序，下面是截圖。 所有帶有橙色豎線的條目都是我自己輸入的。 我要實現的是將所有聊天都放在聊天室的右側。 請讓我知道message_self中的哪些更改可以實現它。 謝謝！

以下是輸出所有聊天記錄的代碼：

  <React.Fragment>
    <Segment>
      <Comment.Group className="messages">
        this.displayMessages(messages)
    </Segment>
  </React.Fragment>

displayMessages的定義如下：

displayMessages = messages =>
    messages.length > 0 &&
    messages.map(message => (
      <Message
        key={message.timestamp}
        message={message}
        user={this.state.user}
      />
    ));

這是Message組件的代碼：

const isOwnMessage = (message, user) => {
  return message.user.id === user.uid ? "message__self" : "";
};

const isImage = message => {
  return message.hasOwnProperty("image") && !message.hasOwnProperty("content");
};

const timeFromNow = timestamp => moment(timestamp).fromNow();

const Message = ({ message, user }) => (
  <Comment>
    <Comment.Avatar src={message.user.avatar} />
    <Comment.Content className={isOwnMessage(message, user)}>
      <Comment.Author as="a">{message.user.name}</Comment.Author>
      <Comment.Metadata>{timeFromNow(message.timestamp)}</Comment.Metadata>
      {isImage(message) ? (
        <Image src={message.image} className="message__image" />
      ) : (
        <Comment.Text>{message.content}</Comment.Text>
      )}
    </Comment.Content>
  </Comment>
);

在index.css中，message__self類似於：

.message__self {
  border-left: 2px solid orange;
  padding-left: 8px;
}

Answer 1

我認為您要做的就是翻轉Comment塊的內容。

因此，對於頂部的Comment組件，您需要一些邏輯來確定要使用的className 。如果當前用戶擁有此注釋，則反轉原始布局。

const Message = ({ message, user }) => (
  <Comment className={message.user.id === user.uid ? reverse : ""}>
    <Comment.Avatar src={message.user.avatar} />
    <Comment.Content className={isOwnMessage(message, user)}>
      <Comment.Author as="a">{message.user.name}</Comment.Author>
      <Comment.Metadata>{timeFromNow(message.timestamp)}</Comment.Metadata>
      {isImage(message) ? (
        <Image src={message.image} className="message__image" />
      ) : (
        <Comment.Text>{message.content}</Comment.Text>
      )}
    </Comment.Content>
  </Comment>
);

然后在您的CSS文件中，為reverse定義一個類

.reverse {
  display: flex;
  flex-direction: row-reverse;
}