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

반응에서 dom 요소를 삭제하는 방법: 1. 렌더링 수명 주기를 사용하여 DOM 노드 변수를 정의합니다. 2. "onClickS(){this.setState({deled:false})}"를 통해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!