-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
안뇽하세요 강사님
21.12.30 15:39 작성 조회수 95
0
다름이아니라 react bootstrap에서 이제 Media를 지원하지 않는거같은데 어떤걸로 대체하면 좋을까 알 수 있을까요?
React-Bootstrap · React-Bootstrap Documentation
답변을 작성해보세요.
0
0
John Ahn
지식공유자2021.12.30
안녕하세요 !!!
Media가 없어진걸 알려주셔서 너무 감사합니다 !!!
우선 Media가 쓰인곳이 Message.js와 MessageHeader.js 두곳이네요 !
먼저 Message.js에서는
<div style={{ marginBottom: '3px', display:'flex' }}>
<img
style={{ borderRadius: '10px' }}
width={48}
height={48}
className="mr-3"
src={message.user.image}
alt={message.user.name}
/>
<div style={{
backgroundColor: isMessageMine(message, user) && "#ECECEC"
}}>
<h6>{message.user.name}{" "}
<span style={{ fontSize: '10px', color: 'gray' }}>
{timeFromNow(message.timestamp)}
</span>
</h6>
{isImage(message) ?
<img style={{ maxWidth: '300px' }} alt="이미지" src={message.image} />
:
<p>
{message.content}
</p>
}
</div>
</div>
이렇게 바꿔주세요 !!!
그리고 MessageHeader에서는
const renderUserPosts = (userPosts) =>
Object.entries(userPosts)
.sort((a, b) => b[1].count - a[1].count)
.map(([key, val], i) => (
<div key={i} style={{ display: 'flex'}}>
<img
style={{ borderRadius: 25 }}
width={48}
height={48}
className="mr-3"
src={val.image}
alt={val.name}
/>
<div>
<h6>{key}</h6>
<p>
{val.count} 개
</p>
</div>
</div>
))
이렇게 바꿔주시면 감사하겠습니다 !
Media를 div 태그로 바꿔주고 display:'flex' 스타일을 주었습니다 !
감사합니다.
답변 2