У меня есть некоторые данные JSON в DummyData . Я не уверен, как я могу разместить пузырьки чата слева и вправо в соответствии с направлением . Я использую материальный пользовательский интерфейс и контекст API. Изображение для ссылки. Я не хочу использовать ни какую библиотеку, отличную от материала ui. < /P>
< /p>
В настоящее время каждый пузырь чат находится влево. Как позиционировать пузырьки в соответствии с направлением . Код до сих пор (CodeSandbox): < /p>
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) => (
{obj.message}
));
return {chatBubbles};
};
export default ChatLayout;
Подробнее здесь: https://stackoverflow.com/questions/581 ... n-react-js
