Comment implémenter cliquer pour masquer et afficher en réaction

Comment implémenter l'affichage cliquer pour masquer dans React : 1. Utilisez le style pour afficher et masquer, un code tel que "{{display:this.state.isShow?'block':'none'}}" ; Utilisez l'opérateur ternaire pour implémenter Masquer et afficher, un code tel que "this.state.isShow?(...):(...)" ; 3. Utilisez la logique de court-circuit pour afficher et masquer des éléments, un code tel que "this .state.isShow&&

...< ;/div>".

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

Comment implémenter l'affichage cliquer pour masquer dans React ?

Utilisation des méthodes d'affichage et de masquage des éléments dans React

Dans React, nous avons quatre méthodes couramment utilisées pour afficher et masquer des éléments. Différentes de vue, en vue nous utilisons v-if ou v-show. pour afficher le masquage et l'affichage des éléments

Ce qui suit présentera les méthodes de masquage et d'affichage des éléments dans React

La première façon : utiliser le style pour afficher et masquer

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第一种方式，用style来显示隐藏*/}
        <button style={{display:this.state.isShow?&#39;block&#39;:&#39;none&#39;}}>张云龙</button>
        <button style={{display:this.state.isShow?&#39;none&#39;:&#39;block&#39;}}>秦霄贤</button>
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

bloc signifie affichage, aucun signifie caché

Le deuxième type : Utilisez l'opérateur ternaire

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>

        {/*第二种方法，用三元运算符*/}
            {
            this.state.isShow?(<div>秦霄贤</div>):(<div>张云龙</div>)
            }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Le troisième type : Afficher et masquer des éléments via une logique de court-circuit

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }
  render() {
    return (
      <div>
        {/*第三种方式*/}
          {
            this.state.isShow && <div>秦霄贤</div>
        }
        {
            !this.state.isShow && <div>张云龙</div>
        }
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Le quatrième type : Forme fonctionnelle

<script type="text/babel">
class App extends React.Component {
    state={
        isShow:false,
        love:'秦霄贤'
    }
    check=()=>{
        this.setState({
            isShow:!this.state.isShow
        })
    }

    loves=(key)=>{
        switch(key){
            case '秦霄贤':
                return <div>秦霄贤</div>
            case '张云龙':
                return <div>张云龙</div>
        }   
    }

  render() {
    let ok=this.loves(this.state.love)
    return (
      <div>
        {/*第四种函数形式*/}
        {ok}
        <button onClick={this.check}>点击切换</button>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

Apprentissage recommandé : "Tutoriel vidéo React"

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!