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

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中，消息__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;
}