Material-ui: Material-UI Paper 구성 요소가 줄 바꾸기 문자를 인식하지 못함

에 만든 2017년 11월 17일 · 5코멘트 · 출처: mui-org/material-ui

새 줄 문자가 포함 된 문자열을 Material-UI Paper 구성 요소에 전달하고 있습니다. 그러나 Paper 구성 요소는 새 줄을 시작하지 않기 때문에 무시하는 것 같습니다. 이 동작은 의도적입니까, 아니면 버그입니까? 문제의 코드는 다음과 같습니다 (comment.text는 문제의 문자열입니다).

<Paper key={index} rounded={false} style={styles.paper}> 
<div>{comment.text}</div> 
<div style={{textAlign: 'right', color: grey500}}>{comment.user + ", " + comment.date}</div> 
</Paper>

question

출처

alexanderwhatley

가장 유용한 댓글

사용 : style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

참고:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 에 2019년 02월 24일

👍70 ❤14 🚀4 🎉4 👀2

모든 5 댓글

@alexanderwhatley comment.text 의 가치는 무엇입니까? 그리고 어떤 버전을 사용하고 있습니까? 우리가 제공하는 템플릿은 질문에보다 효율적으로 답변하는 것입니다. 😁

m2mathew 에 2017년 11월 17일

안녕하세요 @ m2mathew , 죄송합니다. material-ui의 버전은 0.17.4이고 comment.text의 값은 "Hi how \ n are you?"입니다.

alexanderwhatley 에 2017년 11월 17일

음, DOM이 이것을 어떻게 처리할지 생각해보십시오. HTML 파일에서 두 개의 <div> 사이에 넣으면 \n 렌더링이 예상됩니다.

이것은 MUI와 명시 적으로 관련이 없으므로이 문제를 종료하겠습니다. DOM 내에서 콘텐츠를 구현하는 데 도움이 더 필요하면 Stack Overflow 또는 이와 유사한 곳으로 이동하세요.

m2mathew 에 2017년 11월 17일

👍1

사용 : style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

참고:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 에 2019년 02월 24일

👍70 ❤14 🚀4 🎉4 👀2

"타이포그래피"구성 요소에 대한 추가 소품의 가치가있는 것 같습니다.

goodwin64 에 2019년 12월 05일

👍12

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Material-ui: Material-UI Paper 구성 요소가 줄 바꾸기 문자를 인식하지 못함

가장 유용한 댓글

모든 5 댓글

관련 문제