인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

Slack 클론 코딩[실시간 채팅 with React]

챗박스 만들기

Cannot read property 'replace' of undefined

해결된 질문

작성

291

안녕하세요.

먼저 항상 좋은 강의를 제공해주셔서 감사합니다.

다름이 아니라 하나 질문을 하려고 하는데요.

ChatBox에 Props를 넣어주는 과정에서 문제가 생깁니다.

제일 이해가 안 되는 것은 DirectMessage에서 ChatBox 컴포넌트를 넣어 줄 때는 문제가 없는데,

Channel컴포넌트에서 ChatBox를 넣어주면 문제가 생깁니다.

링크 공유 드립니다 !! ->

google docs로 정리해 공유드립니다.

babel 웹팩 typescript react Socket.io 클론코딩

답변 1

제로초(조현영)

지식공유자

react mentions 썼을 때 에러인데 주석처리를 해버리셔서 뭐가 문제인지 모르겠습니다.

hahahoho

ChatBox에서 MentionTextarea 컴포넌트가 문제인 것 같습니다.

ChatBox/styles.tsx에서 MentionsInput이 문제인 것 같습니다....

export const MentionsTextarea = styled(MentionsInput)` 
  font-family: Slack-Lato, appleLogo, sans-serif;
  font-size: 15px;
  padding: 8px 9px;
  width: 100%;
  & strong {
    background: skyblue;
  }
  & textarea {
    height: 44px;
    padding: 9px 10px !important;
    outline: none !important;
    border-radius: 4px !important;
    resize: none !important;
    line-height: 22px;
    border: none;
  }
  & ul {
    border: 1px solid lightgray;
    max-height: 200px;
    overflow-y: auto;
    padding: 9px 10px;
    background: white;
    border-radius: 4px;
    width: 150px;
  }
`;

hahahoho

우선은 div로 변경하고 textarea의 width를 조절해서 해결했습니다.. ㅜㅜ

제로초(조현영)

지식공유자

mention 기능 다 구현하기 전까지는 styled(MentionsInput) 쓰시면 안 됩니다. 강의에서도 styled.textarea로 하다가 바꿨습니다.

hahahoho

방금 mention기능 구현하고 해결했네요.. 감사합니다 !!

작성자 없음

작성자 정보가 삭제된 글입니다.

전체 Q&A

질문하기