javascript - 如何在 React JS 中使用聊天气泡制作像 UI 一样的聊天
问题描述
我有一些 JSON 数据在dummyData
. 我不确定如何根据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;
解决方案
您可以创建单独的聊天气泡 div 并应用 CSS。在您接收消息的地方,将气泡 div 附加到您的用户列表中。
推荐阅读
- sql-server - 在 SqlUserDefinedTypeAttribute 中设置架构名称
- c - 打印存储在 unsigned int 中的实际负数
- excel - ActiveWorkbook.Saved 与 ThisWorkbook.Saved 与 Me.Saved
- .net - 不支持 Interop UserControls 的控件数组?
- php - PHP中文件序列化的内存效率
- phpunit - PHPUnit 是按“所有缺陷”还是“最近的缺陷”排序的?
- java - 问题变了,现在数组混淆了数据
- excel - 使用 excel 计算多张工作表中的完整/不完整
- python - 如何禁用python日志`正在请求的URL``刷新access_token`
- visual-studio-code - 在 VSCode 的 jslint 扩展中关闭“使用空格,不要使用制表符”