React에서 HTML 태그를 올바르게 렌더링하십시오.

Question

React에서 텍스트 모듈을 만들어야합니다. JSX도 사용하고 있습니다. JSON 파일에서 데이터를 수신합니다. 내 모듈이 그런 짓을하려고

{ "text-data": "text": "<small> Hello world </small>" }

: 예를 들어 내 JSX 파일이 렌더링하려고하면 태그에 일반 텍스트가 포함로 <p> {this.props.textData.text}</p>

, 그것은 보여줍니다. 나는 연구 중이었고이 기능을 "위험한 innerHTML 설정"이라고 사용할 수 있지만 XSS 공격을 유발할 수 있으므로 권장하지 않습니다. 나는 HTML 엔티티를 사용하는 것이 효과가 있다고 여기는 다른 대답을 읽었다. 하지만 지금은 그 일을 할 수 없습니다.

Answer 1

dangerouslySetInnerHTML 소품이 이런 경우가 있습니다. 결과적으로, 당신은 이 완전이고 출력하는 html이 유효하며 html이 유효하다고 말하고있는 것입니다. 절대적으로 필요하고 철저히 검증하지 않는 한 사용자 입력 용으로 사용하고 싶지 않을 것입니다.

자세한 내용은 React documentation을 참조하십시오. 이전 유사도 StackOverflow question도 있습니다.