위험하게SetInnerHTML을 사용하여 React에서 HTML 문자열을 안전하게 렌더링하는 방법은 무엇입니까?

HTML 문자열을 HTML로 안전하게 렌더링

이 시나리오에서는 HTML 콘텐츠의 일반 문자열을 렌더링하려고 할 때 문제가 발생하지만 대신 HTML로 해석되지 않고 문자열로 표시됩니다. 이는 일반적으로risklySetInnerHTML에서 사용되는 속성이 문자열이 아닌 객체일 때 발생합니다.

이 문제를 해결하려면 this.props.match.description 속성이 문자열인지 확인하세요. 그렇지 않은 경우 속성에 할당하기 전에 HTML로 변환하세요.

HTML 엔터티 처리

HTML 엔터티를 처리할 때 추가 합병증이 발생합니다. 이러한 경우, 항목을angerlySetInnerHTML에 전달하기 전에 디코딩해야 합니다.

예제 코드

다음 예제 코드를 고려하세요.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>',
    };
  }

  htmlDecode(input) {
    const e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

이 예에서 설명 속성에는 HTML 엔터티(< 및 >)가 포함되어 있습니다. 올바르게 렌더링하려면 htmlDecode 함수를 사용하여 HTML을angerlySetInnerHTML에 전달하기 전에 이러한 엔터티를 디코딩합니다.

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