iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react 怎么删除dom元素
  • 153
分享到

react 怎么删除dom元素

React 2023-05-14 21:05:56 153人浏览 八月长安
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react 怎么删除dom元素?react 删除(隐藏)和增加(显示)元素 DOM节点通常 删除(隐藏)和增加(显示) 很多人用CSS的display的n

react 怎么删除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 怎么删除dom元素的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react 怎么删除dom元素

本文链接: https://www.lsjlt.com/news/206162.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react 怎么删除dom元素
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react 怎么删除dom元素?react 删除(隐藏)和增加(显示)元素 DOM节点通常 删除(隐藏)和增加(显示) 很多人用css的display的n...
    99+
    2023-05-14
    React
  • react如何删除dom元素
    本篇内容主要讲解“react如何删除dom元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react如何删除dom元素”吧!react删除dom元素的方法:1、利用render生命周期来定义一...
    99+
    2023-07-04
  • jquery如何删除dom元素
    本文小编为大家详细介绍“jquery如何删除dom元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何删除dom元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、 jQuery的基本语法在使用...
    99+
    2023-07-05
  • jquery怎么删除dom元素(两种方法)
    在前端开发中,我们经常需要通过代码来操作网页上的Dom元素,其中一个常见需求是删除Dom元素。今天我们就来讨论如何使用jQuery来删除Dom元素。一、 jQuery的基本语法在使用jQuery删除Dom元素之前,我们需要先了解一些关于jQ...
    99+
    2023-05-14
  • jquery如何删除dom匹配的元素
    本文小编为大家详细介绍“jquery如何删除dom匹配的元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何删除dom匹配的元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2024-04-02
  • 如何使用JavaScript永久删除dom元素
    今天小编给大家分享一下如何使用JavaScript永久删除dom元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。解决方案假...
    99+
    2023-06-26
  • golang map怎么删除元素
    删除map元素的两种方法:1、使用delete()函数从map中删除指定键值对,语法“delete(map, 键名)”;2、重新创建一个新的map对象,可以清空map中的所有元素,语法“var mapname map[keytype]val...
    99+
    2023-05-14
    Go Golang go语言
  • jquery如何移除dom元素
    这篇文章主要讲解了“jquery如何移除dom元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何移除dom元素”吧! ...
    99+
    2024-04-02
  • javascript如何移除DOM元素
    小编给大家分享一下javascript如何移除DOM元素,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!javascript移除元素的方法:1、先获取DOM元素,然后利用“parentNode.removeChild()”方...
    99+
    2023-06-14
  • jquery如何从dom删除所有匹配的元素
    这篇文章主要介绍“jquery如何从dom删除所有匹配的元素”,在日常操作中,相信很多人在jquery如何从dom删除所有匹配的元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • 怎么在jquery中删除元素
    这篇文章将为大家详细讲解有关怎么在jquery中删除元素,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。jquery是什么jquery是一个简洁而快速的JavaScript库,它具有独特的链式...
    99+
    2023-06-14
  • React中怎么从状态数组中删除一个元素
    本文小编为大家详细介绍“React中怎么从状态数组中删除一个元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“React中怎么从状态数组中删除一个元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。在 React...
    99+
    2023-07-05
  • golang数组怎么删除元素
    在go语言中,可以利用Slice(切片)的特性来实现数组元素的删除操作。删除方法:1、利用append()实现删除,语法“append(list[:删除索引], list[(删除索引+1):]...)”;2、利用copy()实现删除,语法“...
    99+
    2023-05-14
    数组 go语言 Golang Go
  • javascript怎么删除数组元素
    JavaScript 是一种高级的编程语言,用于在网页中添加交互性和动态性内容。其中,操作数据类型的能力是 JavaScript 如此广受欢迎和重要的原因之一。当我们在处理数据的过程中,经常需要添加、读取和删除一个集合里的元素。比如,当一个...
    99+
    2023-05-14
  • JavaScript怎么添加删除元素
    小编给大家分享一下JavaScript怎么添加删除元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JS添加和删除元素的方法:1、使用“appendChild(&...
    99+
    2023-06-14
  • java怎么删除数组元素
    要删除数组中的元素,可以使用以下步骤: 创建一个新数组,大小比原数组小1。 使用循环遍历原数组,并将不需要删除的元素复制到新数组中...
    99+
    2023-10-27
    java
  • Golang中怎么删除slice元素
    本文小编为大家详细介绍“Golang中怎么删除slice元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“Golang中怎么删除slice元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一. 什么是slice...
    99+
    2023-07-05
  • php怎么删除数组元素
    在PHP中,可以使用unset()函数来删除数组元素。unset()函数接受一个或多个参数,每个参数表示要删除的数组元素的索引或键。...
    99+
    2023-08-17
    php
  • vue怎么删除数组元素
    这篇文章主要讲解了“vue怎么删除数组元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么删除数组元素”吧! 删除方法:...
    99+
    2024-04-02
  • python怎么删除字典元素
    使用python删除字典元素的方法:1.使用pop()函数删除;2.使用popitem()函数删除;3.使用clear()函数删除;4.使用del语句删除;具体方法如下:使用pop()函数删除python中pop()函数的作用是用于删除字典...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作