React에서 HTML 문자열을 올바르게 렌더링하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React에서 HTML 문자열을 올바르게 렌더링하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-11-15 22:45:03

원래의

325명이 탐색했습니다.

How to Properly Render HTML Strings in React?

HTML 문자열을 실제 HTML로 렌더링

HTML 콘텐츠를 실제 HTML로 표시하려고 할 때 특정 시나리오에서는 문자열이 예기치 않은 결과로 이어질 수 있습니다. HTML로 해석되지 않고 텍스트로 렌더링됩니다. 이 문제를 해결하려면 HTML 문자열을 큰따옴표로 묶고 필요한 경우 디코딩하는지 확인하는 것이 중요합니다.

이 문제를 해결하는 한 가지 접근 방식은 다음과 같이 위험하게SetInnerHTML 속성 내에서 HTML 문자열을 큰따옴표로 묶는 것입니다. 다음 예에서는

<div dangerouslySetInnerHTML={{ __html: '" <h1>Hi there!</h1>" ' }} />

로그인 후 복사

그러나 HTML 문자열이 객체로 저장되면 HTML로 렌더링되지 않습니다. 이러한 경우 개체는angerlySetInnerHTML에 할당되기 전에 문자열로 변환되어야 합니다.

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: {
        children: "something",
        style: {
          color: "red"
        }
      }
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.description) }} />
    );
  }
}

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

로그인 후 복사

또한 HTML 문자열 내에서 HTML 엔터티를 처리할 때 위험하게SetInnerHTML에 할당하기 전에 해당 개체를 디코딩하는 것이 필수적입니다. . 이는 htmlDecode 함수를 사용하여 달성할 수 있습니다:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p>&amp;lt;strong&amp;gt;Our Opportunity:&amp;lt;/strong&amp;gt;</p>'
    }
  }

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

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

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

로그인 후 복사

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