如何在React JS中使用聊天气泡进行类似于UI的聊天

Question

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

当前，每个聊天气泡都位于左侧。如何根据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;

Answer 1

使用react和material-ui https://gist.github.com/muhammadawaisshaikh/542f9cff88caaed33e2b601142b7b0e0

构建的自定义聊天组件

Answer 2

我在您的codesanbox中做了一些CSS和逻辑更改。check更新了一个： codesandbox.io/s/practical-faraday-zmkdm-updated-zmkdm  zmkdm.csb.app