제목은 다음과 같습니다. 위험한 SetInnerHTML 너머: React에서 원시 HTML을 렌더링하는 더 안전한 방법이 있습니까?

안전성이 향상된 React에서 원시 HTML 렌더링

질문:

dangerouslySetInnerHTML을 사용하고 있습니까? React에서 원시 HTML을 렌더링하는 유일한 방법은 무엇입니까?

답변:

질문에 설명된 초기 방법 이후, 보다 안전한 HTML 렌더링을 보장하기 위해 React가 발전해 왔습니다. 현재 사용 가능한 네 가지 옵션은 다음과 같습니다.

1. 유니코드

유니코드를 사용하여 HTML 문자를 인코딩합니다. 파일을 UTF-8로 저장하고 문자 세트를 UTF-8로 설정합니다. 예:

<div>{'\u00b7'}</div>

2. 유니코드 번호

유니코드 번호를 자바스크립트 문자열에 삽입하세요.

<div>{String.fromCharCode(183)}</div>

3. 혼합 배열

문자열과 JSX 요소를 배열로 결합:

<div>{['First ', <span>&amp;middot;</span>, ' Second']}</div>

4. DangerouslySetInnerHTML(최후의 수단)

dangerouslySetInnerHTML을 최종 옵션으로 사용:

<div dangerouslySetInnerHTML={{__html: 'First &amp;middot; Second'}} />

권장 사항:

처음 세 가지 방법이 선호됩니다. 안전과 유지보수성을 위해. 꼭 필요한 경우에만 위험하게SetInnerHTML을 사용하세요.

위 내용은 제목은 다음과 같습니다. 위험한 SetInnerHTML 너머: React에서 원시 HTML을 렌더링하는 더 안전한 방법이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!