css - 如何在聊天室中将聊天条目右对齐？

Question

我有一个 React 聊天应用程序，下面附上截图。所有带有橙色竖线的条目都是我自己输入的。我想要实现的是将我所有的聊天内容放在聊天室的右侧。请让我知道 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 block 的内容。

因此对于顶部的 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;
}