JSX에서 React 변수를 사용하여 HTML 콘텐츠를 삽입하는 방법은 무엇입니까?

JSX에서 HTML과 React 변수 통합

React로 애플리케이션을 구축하고 있으며 React 변수를 사용하여 HTML 콘텐츠를 삽입하는 기능이 필요합니다. 당신의 JSX. 이를 달성하기 위한 솔루션은 다음과 같습니다.

dangerallySetInnerHTML 활용

원하는 기능을 달성하려면 destinylySetInnerHTML 속성을 사용할 수 있습니다. 이 속성을 사용하면 요소의 HTML 콘텐츠를 문자열로 직접 설정할 수 있습니다. 다음은 이를 사용하는 방법에 대한 예입니다.

<code class="jsx">render: function() {
    const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}</code>

HTML의 문자열 값을 thisIsMyCopy 변수에 할당한 다음 이를angerlySetInnerHTML의 __html 값으로 설정하면 원하는 HTML 콘텐츠를 효과적으로 삽입할 수 있습니다. React 구성 요소 내에서. 이렇게 하면 HTML이 예상대로 요소 내에서 렌더링됩니다.

추가 고려 사항

dangerlySetInnerHTML이 제대로 처리되지 않으면 보안 위험이 될 수 있다는 점에 유의하는 것이 중요합니다. 이를 통해 잠재적으로 XSS 취약점을 유발할 수 있는 임의의 HTML을 렌더링할 수 있습니다. 따라서 삽입하는 HTML 콘텐츠가 신뢰할 수 있고 신뢰할 수 있는 소스에서 나온 것인지 확인하는 것이 중요합니다.

위 내용은 JSX에서 React 변수를 사용하여 HTML 콘텐츠를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!