react刪除dom元素的方法：1、利用render生命週期定義一個DOM節點變數；2、透過「onClickS(){this.setState({deled:false})}」實作刪除dom元素即可。
本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react 怎麼刪除dom元素？
react 刪除（隱藏）和增加（顯示）元素DOM節點
#通常刪除（隱藏）和增加（顯示） 很多人用css的display的none樣式來實現這樣有個缺點F12直接改樣式就可以，非常不安全我們應該實現真正的刪除和增加但是在react看來也可以叫渲染和不渲染這個組件這個dom
react有removeChild方法但是沒有appendChild方法so我們就只能透過render 結合state方法來更新頁面了
也就是利用render生命週期來定義一個變數DOM節點變數
然後透過state來更新是否顯示的值
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('../image/joinwechat/s.png')}></img>:showMap=''//这是一张二维码图
return (
< >
<button onClick={this.onClickS}>点我删除二维码</button>
<button onClick={this.onClick}>点我恢复二维码</button>
{showMap}
</>
)
}
}
export default Page2;推薦學習：《react影片教學》
以上是react 怎麼刪除dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
