내 React 구성 요소에 HTML 콘텐츠를 동적으로 삽입하려면 어떻게 해야 합니까?

React의위험한SetInnerHTML을 활용하여 HTML 콘텐츠를 동적으로 삽입

React 개발 영역에서 개발자는 동적으로 HTML 콘텐츠를 삽입해야 하는 경우가 종종 있습니다. 애플리케이션 상태에 따라 변경됩니다. JSX 내에서 React 변수 명령문을 사용하는 개념이 작용하는 곳입니다.

HTML을 포함하는 다음과 같은 변수가 있는 시나리오를 고려해보세요.

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

목표 JSX를 사용하여 이 HTML을 React 구성 요소에 삽입하는 것입니다. 그러나 아래에 표시된 표준 방법을 사용하여 이 작업을 시도하면 작동하지 않습니다.

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

이는 React가 HTML 콘텐츠를 문자열로 처리하고 해당 HTML 문자를 이스케이프하기 때문입니다. React 변수를 사용하여 HTML을 동적으로 삽입하려면 위험하게SetInnerHTML이라는 특수 React 속성을 활용해야 합니다. 이 속성을 사용하면 HTML 문자를 이스케이프 처리하는 React의 기본 동작을 우회하고 원시 HTML 콘텐츠를 DOM에 삽입할 수 있습니다.

이를 구현하려면 다음과 같이 코드를 수정하세요.

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

위험하게SetInnerHTML을 사용하면 변수를 기반으로 복잡한 HTML 콘텐츠를 React 구성 요소에 동적으로 삽입할 수 있어 애플리케이션의 유연성과 표현력이 향상됩니다.

위 내용은 내 React 구성 요소에 HTML 콘텐츠를 동적으로 삽입하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!