Comment supprimer des éléments dom en réaction

Comment supprimer des éléments dom dans React : 1. Utilisez le cycle de vie du rendu pour définir une variable de nœud DOM ; 2. Supprimez les éléments dom via "onClickS(){this.setState({deled:false})}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment supprimer des éléments dom dans React ?

react supprime (masquer) et ajoute (affiche) des nœuds DOM d'éléments

Habituellement, supprimez (masquez) et ajoutez (affichez) de nombreuses personnes utilisent le style d'affichage CSS aucun pour y parvenir. Il y a un inconvénient que F12 peut modifier directement. le style. C'est très dangereux. Nous devrions implémenter une véritable suppression et ajout, mais en réaction, cela peut aussi être appelé rendu ou non de ce composant. Ce dom

react a une méthode removeChild mais pas de méthode appendChild, nous ne pouvons donc que le faire. mettre à jour la page via le rendu combiné avec la méthode d'état.

C'est-à-dire en utilisant le cycle de vie du rendu pour définir une variable de nœud DOM

, puis en mettant à jour la valeur de son affichage via l'état

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;

Apprentissage recommandé : " tutoriel vidéo de réaction"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!