React에서 HTML 이스케이프

UTF-8 문자 {code...}를 사용하여 JSX에서 직접 고정 콘텐츠를 출력합니다. HTML 이스케이프 문자 {code...} 또는 십진 이스케이프 문자 {code...}를 사용하여 동적 콘텐츠를 이스케이프하지만 레이어를 추가하는 경우 외부에 중괄호가 있으면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다. 이 기사에서는 React의 HTML 이스케이프 방법을 공유하겠습니다.

1. UTF-8 문자를 직접 사용

   <p>版权 ©</p>

2. HTML 이스케이프 문자

   <p>版权 &copy;</p>

   또는 십진 이스케이프 문자

   <p>版权 &#169;</p>

동적 콘텐츠 이스케이프

하지만 외부에 레이어를 추가하는 경우 중괄호를 사용하면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다.

React는 XSS를 방지하기 위해 DOM에 표시되는 모든 문자열을 이스케이프합니다. 따라서 JSX에 ©(©)와 같이 이스케이프된 엔터티 문자가 포함되어 있으면 React가 ©의 특수 문자를 자동으로 이스케이프하기 때문에 최종 DOM에 올바르게 표시되지 않습니다.

<p>{'版权 &#169;'}</p>

오류 출력

版权 ©

올바른 쓰기:

1. UTF-8 문자를 직접 사용해도 올바르게 출력될 수 있습니다.

   <p>{'版权 ©'}</p>

2. 안전한 방법은 해당 유니코드 코드를 사용하는 것입니다

   <p>{'版权 \u00a9'}</p>

3. fromCharCode

   rrre 에

4. 배열 어셈블리를 사용하세요

   <p>{'版权 ' + String.fromCharCode(169)}</p>

5. dangerlySetInnerHTML을 사용하면 React 이스케이프 문자를 피할 수 있습니다

   <p>{['版权 ', <span>&#169;</span>]}</p>

Reference

1. JSX Gotchas

2. React 기술 스택에 깊이

출력 JSX 고정 콘텐츠

1. UTF-8 문자를 직접 사용

   <p dangerouslySetInnerHTML={{ __html: &#39;版权 &#169;&#39; }} />

2. HTML 이스케이프 문자

   <p>版权 ©</p>

   또는 십진 이스케이프 문자를 사용하세요

   <p>版权 &copy;</p>

동적 콘텐츠의 이스케이프

그러나 외부인 경우 추가하는 경우 중괄호 레이어를 사용하면 React는 XSS를 방지하기 위해 이스케이프된 문자 엔터티를 다시 이스케이프합니다. React는 XSS를 방지하기 위해 DOM에 표시되는 모든 문자열을 이스케이프합니다. 따라서 JSX에 ©(©)와 같이 이스케이프된 엔터티 문자가 포함되어 있으면 React가 ©의 특수 문자를 자동으로 이스케이프하기 때문에 최종 DOM에 올바르게 표시되지 않습니다.

<p>版权 &#169;</p>

오류 출력

<p>{'版权 &#169;'}</p>

올바른 쓰기:

UTF-8 문자를 직접 사용해도 올바르게 출력될 수 있습니다.

版权 ©

1. 안전한 방법은 해당 유니코드 코드를 사용하는 것입니다

<p>{'版权 ©'}</p>

2. fromCharCode
rrre 에

3. 배열 어셈블리 사용

<p>{'版权 \u00a9'}</p>

4. DangerlySetInnerHTML을 사용하여 React 이스케이프 문자 방지

<p>{'版权 ' + String.fromCharCode(169)}</p>

5. 위 내용은 React에서의 HTML 이스케이프 작성 방법입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

React에서 구성 요소를 작성하는 방법

React와 Preact의 setState 차이점

React 이벤트 시스템에 대한 지식

위 내용은 React에서 HTML 이스케이프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!