> 웹 프론트엔드 > 프런트엔드 Q&A > 반응에서 DOM 요소를 삭제하는 방법

반응에서 DOM 요소를 삭제하는 방법

藏色散人
풀어 주다: 2022-12-27 09:39:31
원래의
2908명이 탐색했습니다.

반응에서 dom 요소를 삭제하는 방법: 1. 렌더링 수명 주기를 사용하여 DOM 노드 변수를 정의합니다. 2. "onClickS(){this.setState({deled:false})}"를 통해 dom 요소를 삭제합니다.

반응에서 DOM 요소를 삭제하는 방법

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

반응에서 DOM 요소를 삭제하는 방법은 무엇입니까?

react는 요소 DOM 노드를 삭제(숨기기) 및 추가(표시)합니다.

보통 많은 사람들이 이를 달성하기 위해 None 스타일의 CSS 표시를 사용합니다. F12에서 직접 변경할 수 있다는 단점이 있습니다. 매우 안전하지 않습니다. 실제 삭제 및 추가를 구현해야 하지만 반응에서는 이 구성 요소를 렌더링하거나 렌더링하지 않을 수도 있습니다. 이 dom

react에는 addChild 메서드가 없으므로 우리는 상태 메소드와 결합된 렌더링을 통해 페이지를 업데이트합니다.

즉, 렌더링 수명 주기를 사용하여 변수 DOM 노드 변수를 정의한 다음

상태를 통해 표시할지 여부의 값을 업데이트합니다.

import React from 'react';
class Page2 extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            deled:true
        }
        this.onClick=this.onClick.bind(this)
        this.onClickS=this.onClickS.bind(this)
      }
 //恢复
    onClick(){
        this.setState({
            deled:true
        })
    }
  //删除
    onClickS(){
        this.setState({
            deled:false
        })
    }
    render() {
        const { deled} = this.state;
        var  showMap='';
        //三元表达式判断deled的值来更新showMap
        deled==true?showMap=<img src={require(&#39;../image/joinwechat/s.png&#39;)}></img>:showMap=&#39;&#39;//这是一张二维码图
        return (
            < >
                 <button onClick={this.onClickS}>点我删除二维码</button>
                 <button onClick={this.onClick}>点我恢复二维码</button>
                    {showMap}
            </>
        )
    }
}
export default Page2;
로그인 후 복사

권장 학습: " 리액트 영상 튜토리얼"

위 내용은 반응에서 DOM 요소를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿