本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react 怎么删除dom元素?react 删除(隐藏)和增加(显示)元素 DOM节点通常 删除(隐藏)和增加(显示) 很多人用CSS的display的n
本教程操作环境: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 怎么删除dom元素的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: react 怎么删除dom元素
本文链接: https://www.lsjlt.com/news/206162.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0