`dangerouslySetInnerHTML` 없이 React에서 원시 HTML을 안전하게 렌더링하는 방법은 무엇입니까?

더 안전한 방법을 사용하여 React에서 원시 HTML 렌더링

React에서는 이제 위험한SetInnerHTML 사용을 피하면서 더 안전한 방법을 사용하여 원시 HTML을 렌더링할 수 있습니다. . 다음은 네 가지 옵션입니다.

1. 유니코드 인코딩

유니코드 문자를 사용하여 UTF-8 인코딩 파일에서 HTML 엔터티를 나타냅니다.

<div>{`First \u00b7 Second`}</div>

2. JSX 문자열의 유니코드 숫자

JSX 문자열 내에서 HTML 엔터티를 유니코드 숫자로 변환:

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3. 문자열과 JSX 요소의 혼합 배열

문자열과 JSX 요소를 결합하여 복잡한 HTML을 렌더링합니다.

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

4. DangerouslySetInnerHTML을 최후의 수단으로 사용

dangerouslySetInnerHTML을 최후의 수단으로만 사용하십시오. 잠재적인 보안 취약점이 발생할 수 있습니다.

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

위 내용은 `dangerouslySetInnerHTML` 없이 React에서 원시 HTML을 안전하게 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!