如何在 React JS 中使用聊天气泡制作像 UI 一样的聊天

Posted 2023-02-22

【中文标题】如何在 React JS 中使用聊天气泡制作像 UI 一样的聊天

【英文标题】：How to make chat like UI with chat bubbles in React JS

【发布时间】：2020-01-29 09:04:04

【问题描述】：

我在dummyData 中有一些 JSON 数据。我不确定如何根据direction 将聊天气泡放置在左右两侧。我正在使用 Material UI 和上下文 API。图片供参考。除了材质 UI，我不想使用任何库。

目前，每个聊天气泡都位于左侧。如何根据direction 定位气泡。到目前为止的代码（CodeSandbox）：

    import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => (
    container: 
        bottom: 0,
        position: 'fixed'
    ,
    bubbleContainer: 
        width: '100%'
    ,
    bubble: 
        border: '0.5px solid black',
        borderRadius: '10px',
        margin: '5px',
        padding: '10px',
        display: 'inline-block'
    
));

const ChatLayout = () => 
    const classes = useStyles();
    const dummyData = [
        
            message: '1: This should be in left',
            direction: 'left'
        ,
        
            message: '2: This should be in right',
            direction: 'right'
        ,
        
            message: '3: This should be in left again',
            direction: 'left'
        
    ];

    const chatBubbles = dummyData.map((obj, i = 0) => (
        <div className=classes.bubbleContainer>
            <div key=i++ className=classes.bubble>
                <div className=classes.button>obj.message</div>
            </div>
        </div>
    ));
    return <div className=classes.container>chatBubbles</div>;
;

export default ChatLayout;

【问题讨论】：

我在你的codesanbox中做了一些css和逻辑更改。检查更新了一个：codesandbox.io/s/practical-faraday-zmkdm-updated-zmkdm，zmkdm.csb.app

这太完美了！请把它作为一个答案。如何将“bubbleContainer”对齐到底部？我尝试将“justify-content: flex-end !important”添加到“bubbleContainer”，但不起作用。

你的意思是你想让气泡从下到上开始吗？

是的。我曾使用“底部：0，位置：'固定'”来实现它。

现在检查，我已经更新了 style.css

【参考方案1】：

我在您的代码框中进行了一些 css 和逻辑更改。检查更新了一个： codesandbox.io/s/practical-faraday-zmkdm-updated-zmkdm zmkdm.csb.app

【参考方案2】：

使用 react 和 material-ui 构建的自定义聊天组件 https://gist.github.com/muhammadawaisshaikh/542f9cff88caaed33e2b601142b7b0e0

【参考方案3】：

您可以创建单独的聊天气泡 div 并应用 CSS。在您接收消息的位置将气泡 div 附加到您的用户列表中。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。