我在 dummyData
中有一些 JSON 数据。我不确定如何根据 direction
将聊天气泡放置在左右两侧。我正在使用 Material UI 和上下文 API。图片供引用。除了 Material UI,我不想使用任何库。
目前,每个聊天气泡都位于左侧。如何根据方向
定位气泡。到目前为止的代码(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;
最佳答案
您可以创建单独的聊天气泡 div 并应用 CSS。在您接收消息的位置将气泡 div 附加到您的用户列表。
关于javascript - 如何在 React JS 中使用聊天气泡像 UI 一样聊天,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58161615/