React에서 HTML 문자열을 JSX로 안전하게 렌더링하려면 어떻게 해야 합니까?

ReactJS에서 HTML 문자열을 JSX로 변환

문제 설명:

HTML 데이터를 표시할 때 ReactJS에서 AJAX를 통해 검색된 데이터는 렌더링되지 않고 일반 텍스트로 나타나는 경우가 많습니다. HTML 요소. 이는 크로스 사이트 스크립팅 취약점을 방지하기 위해 HTML을 이스케이프하는 React의 기본 동작 때문입니다.

해결책:

HTML 문자열을 JSX로 변환하고 렌더링된 HTML로 표시하려면 요소에는 dangerouslySetInnerHTML 속성을 ​​사용할 수 있습니다. 이 속성을 사용하면 요소의 내부 HTML 콘텐츠를 직접 설정할 수 있습니다.

구현:

dangerouslySetInnerHTML 속성을 ​​사용하려면 다음을 수행해야 합니다. HTML 콘텐츠를 문자열로 포함하는 개체에 바인딩합니다. 이 객체는 다음 구조를 가져야 합니다.

{ __html: 'Your HTML content' }

다음은 ReactJS에서 dangerouslySetInnerHTML 속성을 ​​사용하는 방법에 대한 예입니다.

import React, { useState } from 'react';

const MyComponent = () => {
  const [htmlContent, setHtmlContent] = useState('');

  const handleHtml = (data) => {
    setHtmlContent(data.html);
  };

  return (
    <div>
      <button onClick={() => handleHtml({ html: '<h1>Hello, React!</h1>' })}>Load HTML</button>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </div>
  );
};

export default MyComponent;

이 예에서 dangerouslySetInnerHTML 속성은 handleHtml 함수는 렌더링된 HTML 요소입니다.

주의:

dangerouslySetInnerHTML 속성을 ​​사용하면 다음과 같은 경우 보안 위험이 발생할 수 있습니다. HTML 콘텐츠가 제대로 삭제되지 않았습니다. 이 속성을 사용하기 전에 렌더링하는 HTML 콘텐츠가 안전하고 신뢰할 수 있는지 항상 확인하세요.

위 내용은 React에서 HTML 문자열을 JSX로 안전하게 렌더링하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!