>  기사  >  웹 프론트엔드  >  반응에 노드를 동적으로 추가하는 방법

반응에 노드를 동적으로 추가하는 방법

藏色散人
藏色散人원래의
2022-12-29 11:48:011955검색

반응에 노드를 동적으로 추가하는 방법: 1. "KmcDialog.showInstance = function(properties) {...}" 메서드를 통해 팝업 상자를 표시합니다. 2. "KmcDialog.showInstance({isShow: true}"를 사용합니다. );KmcDialog.removeInstance" ();" 메서드는 필요한 경우 직접 호출할 수 있습니다.

반응에 노드를 동적으로 추가하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에 노드를 동적으로 추가하는 방법은 무엇입니까?

React - 노드 구성 요소를 동적으로 삽입

구성 요소를 도입한 후

/**********组件KmcDialog************/
/**
 * 显示弹框
 */
KmcDialog.showInstance = function(properties) {
    if (!document.getElementById("KmcDialog")) {
        let props = properties || {};
        let div = document.createElement('div');
        div.setAttribute('id', 'KmcDialog');
        document.body.appendChild(div);
        ReactDOM.render(React.createElement(KmcDialog, props), div);
    }
}
/**
 * 删除弹框
 */
KmcDialog.removeInstance = function() {
    if(document.getElementById("KmcDialog")) {
        document.getElementById('KmcDialog').remove();
    }
}

를 호출하여 디스플레이 구성 요소를 삽입할 수 있습니다. 사용해야 하는 곳에 직접 호출:

KmcDialog.showInstance({
    isShow: true
});
KmcDialog.removeInstance();

권장 학습: "react 비디오 튜토리얼"

위 내용은 반응에 노드를 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.